html - 水平列表自动换行

Question

所以我有一个包含 4 个元素的 ol。当没有足够的空间来显示所有这些时，我希望它换行到下一行，但只在列表的中心

所以我有

<ol>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ol>

它是这样显示的，

A B C D  

然而，当我缩小页面时，我希望它显示为

A B
C D

代替

A B C
D

所以我需要在 BC 之间添加一些东西，但我不知道是什么。 感谢您的帮助!

Answer 1

你可以这样写标记:

HTML

<ol>
 <ul>
    <li>A</li>
    <li>B</li>
 </ul>
 <ul>
    <li>C</li>
    <li>D</li>
 </ul>    
</ol>

CSS

ol li{
    width:150px;
    background:red;
    text-align:center;
    float:left;
}
ul{
    float:left;
    overflow:hidden;
}

检查这个http://jsfiddle.net/nkAtV/1/