flex的li显示问题？

Question

以下样式为什么在一些如平板上这样显示，如何修复？为什么1，2，3这些序号好像都单独占一行了！

li {
    list-style-type: decimal;
    margin-bottom: 3px;
    padding-bottom: 8px;
    border-bottom: 2px dashed #CCCCCC;
}
div {
    display: flex;
    justify-content: space-between;
}

<ol>
    <li><div>左边内容1<i>右边的1</i></div></li>
    <li><div>左边内容2<i>右边的2</i></div></li>
    <li><div>左边内容3<i>右边的3</i></div></li>
    <li><div>左边内容4<i>右边的4</i></div></li>
</ol>

正常显示是这样：

Answer 1

li {
  display: flex;
  justify-content: space-between;
  list-style-type: none; 
  margin-bottom: 3px;
  padding-bottom: 8px;
  border-bottom: 2px dashed #CCCCCC;
}

li:before {
  content: counter(item) ". ";
  counter-increment: item;
  margin-right: 8px;
}

<ol>
  <li><span>左边内容1</span><i>右边的1</i></li>
  <li><span>左边内容2</span><i>右边的2</i></li>
  <li><span>左边内容3</span><i>右边的3</i></li>
  <li><span>左边内容4</span><i>右边的4</i></li>
</ol>

Answer 2

可以给li加上line-height: 0;，div加上line-height: 20px;，div加多少看你具体行高想设置成多少

li {
   list-style-type: decimal;
   margin-bottom: 3px;
   padding-bottom: 8px;
   border-bottom: 2px dashed #CCCCCC;
   line-height: 0;
}
div {
   display: flex;
   justify-content: space-between;
   vertical-align: middle;
   line-height: 20px;
}