css - 存在する兄弟の数に基づく要素の幅

Question

500px の ul があるとします。子 li がフロート左であるとします。CSS を記述して、li が 2 行目に移動しないようにする方法はありますか?

例えば。

<ul>
   <li>test</li>
</ul>

li は 500px 全体を占めます

<ul>
   <li>test</li>
   <li>test</li>
</ul>

2 li は幅を分割します。基本的に各 250px

<ul>
   <li>test</li>
   <li>test</li>
   <li>test</li>
</ul>

3つの方法などに分割します...

ありがとう！

score 5 · Accepted Answer

ul {
    width: 500px;
    display: table;
}

li {
    display: table-cell;
}

これがフィドルです：http：//jsfiddle.net/WhbuQ/

score 0 · Accepted Answer

Flexboxが最終化され、より適切に実装されるようになると、優れたオプションが提供されます。

現在の Gecko/Webkit でサポートされている古いスタイルの構文を使用してフィドルします。

2 に答える 2