25

<ul>さまざまな数のアイテム ( ) を含む順序付けられていないリスト ( )<li>があります。アイテムをリストの幅に広げることができる 1 つの CSS スタイルを使用したいと考えています。

これは私が持っているものです:

ここに画像の説明を入力

これは私が欲しいものです:

ここに画像の説明を入力

HTML:

These 4 items should fill the width:<br/>
<ul id="ul1">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<br/>
These 5 items should fill the width:<br/>
<ul id="ul2">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<br/>
And so on and so forth...

開始するためのJSFiddleを次に示します。

注: CSS でハードコードしwidthたくありません。注: ユースケースについて疑問がある場合、これはレスポンシブ デザインのナビゲーション構造であり、解像度に関係なくリスト項目が常に使用可能な幅を埋めるようにしたいと考えています。

4

5 に答える 5

45

デモ HI 今、あなたはこれを行うことができます

慣れてい display :tableてdisplay:table-cell

このように

CSS

ul {
    border:1px dotted black;
    padding: 0;
    display:table;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
li {
    background-color: red;
    display:table-cell;
}
li:nth-child(2n) {
    background-color: #0F0;
}

次に、親 を定義するdisplay:table;か、子を定義しますwidth:100%; display:table-cell;

デモ

于 2012-11-15T12:05:36.370 に答える
1

私は最も簡単な解決策を持っています。 <ul style="padding: 0;"> <li style="list-style-type: none;margin:0;"></li> </ul>

于 2016-12-08T05:49:16.283 に答える