html - 你如何让有序列表的数字显示在 IE 的左侧？

Question

我在 div 标签中有一行数据向左浮动并设置了宽度。它们在 li 标签内。在 chrome 和 FF 中一切正常，但在 IE8 中，数字显示在我的行中间，紧挨着最后一个没有 float 的 div 标签。

列表是动态创建的，因此我将尝试重新创建一个示例。

<ol id='list'>
    <li>
        <div id='d1'>data</div>
        <div id='d2'>data2</div>
    </li>
</ol>

CSS 看起来像

#d1{
    float:left;  
    width:50px;
}
#d2{
    width:40px;
}

这是我在这里的第一个问题，希望它足够清楚。

Answer 1

属于特定行的所有 div 都应该保持 float ，容器应该是内联 block 或常规 block 。

例如:

<style>
  .column { float:left; }
  #d1 { width: 50px; }
  #d2 { width: 40px; }
  li {display: inline-block;}
  br { clear: both; }
</style>
<li>
  <div class="column" id="d1">data</div>
  <div class="column" id="d2">data2</div>
</li>
<br>
<li>
  <div class="column" id="d1">data</div>
  <div class="column" id="d2">data2</div>
</li>

很可能您的文档类型无效或选择了导致怪癖模式的文档类型，这就是它在某些浏览器中工作的原因。