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 之间放一些东西，但我不知道是什么。感谢您的任何帮助！

score 2 · Accepted Answer

你可以这样写标记：

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

1 回答 1