水平有序列表(和IE)

Question

我正在寻找生成类似于此的输出:

1. One      2. Two      3. Three      4. Four

来自以下HTML代码

<ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ol>

看起来Internet Explorer不希望在浮动li时显示数字(列表项),以使它们成为水平.

有没有人碰到这个并找到了我可以使用的解决方案？

Answer 1

你能用这个CSS吗？

li  {display: inline}

编辑:这不保留项目编号,我不知道任何方法.作为替代,我想你所能做的就是手动插入数字,直到浏览器得到更好的CSS计数器支持.

Answer 2

此代码适用于我测试过的所有浏览器.如果您还没有找到答案,那么对最受欢迎的答案的建议是有效的.如果你想要它包裹,只需调整你的宽度.

<ol style="list-style-type:decimal; width: 600px;">
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
</ol>

ol.horizontal{
    list-style-type: decimal;
    width: 600px;
}

ol.horizontal li{
    float: left;
    width: 200px;
    padding: 2px 0px;
}

<ol class="horizontal">
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
</ol>