jquery - 強制
の幅をコンテンツと同じにする

Question

明らかにリスト項目 (li) を含む順不同リスト (UL) を取得しました。

それに関する問題は、liタグの幅が親の幅と同じであることです。ulタグに幅を割り当てていませんが、 UL を含む DIV に幅を割り当てています。私が割り当てた幅は 600 ピクセルなので、liタグは 600 幅になりました。2 単語しか含まれていなくても問題ありません。

li をコンテンツと同じ幅にするにはどうすればよいですか?

ありがとう！

score 4 · Accepted Answer

デフォルトdivでは、ul&liはすべてdisplay:block意味がありwidth:100%ます。それらをインラインブロックにする必要があるコンテンツに縮小するには、このクラスを使用してこれを実現します..

.inline_block{
    display: inline-block;
    zoom: 1;
    *display: inline;
}

編集：それを行うためのより良い方法を見つけました。

li{
    float:left;
    clear:left;
    background-color:red;
}

score 2 · Accepted Answer

あなたはこのようにしたいですか？デモ

CSS

div{width: 600px; background-color: gray;}
ul{list-style: none; margin: 0; padding: 0;}
li{background-color: red; display: table-row;}

html

<div>
    <ul>
        <li>list 1</li>
        <li>list 2</li>
        <li>list three 3</li>
    </ul>
</div>

li{background-color: red; width: auto; display: table;}

私はまた別の方法を見つけました。このデモを見る

ul{background-color: gray; list-style: none; margin: 0; padding: 0; }
li{background-color: red; display: inline-block; width:100%;}

jquery - 強制の幅をコンテンツと同じにする