Question

我希望生成类似于此的输出：

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

来自以下HTML代码

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

当您浮动li以使它们成为水平时，Internet Explorer似乎不希望显示数字（列表项）。

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

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>

Answer 3

我已尝试this page上的每个display属性，并且在IE中水平显示列表时，它们都没有保留有序列表编号（它们也不保存在Firefox，Opera或Safari for Windows中 - 可能还有Google Chrome浏览器，但我承认我没有测试那里的每个display属性。

（部分 - 仅在Firefox中）有效的唯一解决方案是Al W's answer。

我认为如果你想要一个水平编号的列表，你将不得不在服务器上生成它或使用JavaScript操作客户端上的列表来重新插入数字。

Answer 4

好的，你需要为css添加一个float，width和list-style-type属性。看起来像这样：

li{
    float:left;
    width:50px;
    list-style-type:decimal;
}

具志坚

Answer 5

您无法在内联元素上设置宽度。所以我通常最终会漂浮它们

li
{
    float: left;
    width:30px;
}

Answer 6

css：

li { display:inline; }

Answer 7

我发现this page about IE hasLayout很有用。它包括对此类列表格式的讨论（链接指向页面的列表部分）

水平有序列表（和IE）

7 个答案: