横向有序列表（和IE） [英] Horizontal Ordered List (and IE)

问题描述

我期待产生类似这样的输出：

I'm looking to generate an output similar to this:

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

从下面的HTML code

from the following HTML Code

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

看来，Internet Explorer不会想显示的号码的（列表项的），当你漂浮在李的，以使他们的水平。

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.

有没有人遇到了这一点，并找到了一个解决方案，我可以使用吗？

Has anyone run into this and found a solution I can use?

推荐答案

这code工作在我所测试的所有浏览器。如果你还没有找到一个答案，最受欢迎的答案的建议是有效的。如果你想让它来包装只是调整的宽度。

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>

这篇关于横向有序列表（和IE）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！