css - 水平有序列表(和 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 不想在您 float li 以使它们水平时显示数字(列表项)。

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

Answer 1

此代码适用于我测试过的所有浏览器。如果您还没有找到答案，最流行答案的建议是有效的。如果你想让它换行，只需调整你的宽度。

<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>