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

これをチェックしてくださいhttp://jsfiddle.net/nkAtV/1/

1 に答える 1