CSS 水平有序列表（和 IE）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/579253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal Ordered List (and IE)
提问by Michael
I'm looking to generate an output similar to this:
我希望生成类似于此的输出：
1. One 2. Two 3. Three 4. Four
from the following HTML Code
来自以下 HTML 代码
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
It seems that Internet Explorer does not want to display the number's (list-item's) when you float the li's in order to make them horizontal.
当您浮动 li 以使它们水平时，Internet Explorer 似乎不想显示数字（列表项）。
Has anyone run into this and found a solution I can use?
有没有人遇到过这个问题并找到了我可以使用的解决方案？
采纳答案by M. Williams
This code works in all browsers that I have tested. If you have not found an answer yet, the suggestion on the most popular answer is valid. Just adjust your width if you want it to wrap.
此代码适用于我测试过的所有浏览器。如果您还没有找到答案，则关于最受欢迎答案的建议是有效的。如果你想让它包裹起来，只需调整你的宽度。
<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>
回答by David Z
Can you use this CSS?
你能用这个 CSS 吗？
li {display: inline}
EDIT: This does not preserve the item numbering, and I'm not aware of any method that does. As a substitute, I guess all you can do is insert the numbers manually, until browsers get better support for CSS counters.
编辑：这不会保留项目编号，我不知道有任何方法可以这样做。作为替代，我想您所能做的就是手动插入数字，直到浏览器更好地支持 CSS 计数器。
回答by SvenFinke
Okay, you need to add a float, width and list-style-type attribute to the css. Looks like this:
好的，您需要为 css 添加一个 float、width 和 list-style-type 属性。看起来像这样：
li{
float:left;
width:50px;
list-style-type:decimal;
}
Gushiken
古士研
回答by Grant Wagner
I've tried every displayproperty on this pageand none of them preserve the ordered list numbers when displaying the list horizontally in IE (nor are they preserved in Firefox, Opera or Safari for Windows - and by extension probably Google Chrome, although I admit I didn't test every displayproperty there).
我已经尝试display了此页面上的所有属性，但在 IE 中水平显示列表时，它们都没有保留有序列表编号（它们也没有保留在 Windows 的 Firefox、Opera 或 Safari 中 - 并且扩展可能是 Google Chrome，尽管我承认我没有测试display那里的每个属性）。
The only solution that (partially - in Firefox only) works is Al W's answer.
唯一（部分-仅在 Firefox 中）有效的解决方案是Al W's answer。
I think if you want a horizontal numbered list, you are going to have to generate it on the server or manipulate the list on the client using JavaScript to re-insert the numbers.
我认为如果你想要一个水平编号的列表，你将不得不在服务器上生成它或使用 JavaScript 在客户端上操作列表以重新插入数字。
回答by Al W
you can't set a width on inline elements. so i usually end up floating them instead
您不能为内联元素设置宽度。所以我通常最终会浮动它们
li
{
float: left;
width:30px;
}
回答by Quintin Robinson
css:
css：
li { display:inline; }
回答by Quintin Robinson
I found this page about IE hasLayoutuseful. It includes discussion of such list formatting (the link points to the lists section of the page)
我发现这个关于 IE hasLayout 的页面很有用。它包括对此类列表格式的讨论（链接指向页面的列表部分）
