9

我正在寻找类似这样的输出：

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 似乎不想显示数字（列表项）。

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

4

7 回答 7

8

你能用这个 CSS 吗？

li  {display: inline}

编辑：这不会保留项目编号，我不知道有任何方法可以这样做。作为替代，我想你所能做的就是手动插入数字，直到浏览器更好地支持 CSS 计数器。

于 2009-02-23T20:44:59.913 回答
8

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

<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>
于 2009-11-06T14:34:59.747 回答
4

我已经尝试了此页面display上的每个属性，但在 IE 中水平显示列表时，它们都没有保留有序列表编号（它们也没有保留在 Windows 的 Firefox、Opera 或 Safari 中 - 并且扩展可能是 Google Chrome，尽管我承认我没有测试那里的每个属性）。display

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

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

于 2009-02-23T21:10:22.507 回答
4

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

李{
    向左飘浮;
    宽度：50px；
    列表样式类型：十进制；
}

古士肯

于 2009-04-09T12:48:36.590 回答
1

您不能在内联元素上设置宽度。所以我通常最终会浮动它们

li
{
    float: left;
    width:30px;
}
于 2009-02-23T20:48:24.990 回答
0

CSS： 

li { display:inline; }
于 2009-02-23T20:44:50.990 回答
0

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

于 2009-04-09T12:12:12.323 回答