0

このレイアウトが HTML にある場合:

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

この CSS では:

div
{
    width: 200px;
    overflow: hidden;
}

ul
{
    list-style: none;
    height: 100px;
}

li
{
    display: block;
    width: 100px;
    height: 100px;
    float: left;
}

2 つの要素が次の行に<ul>折り返されるのではなく、コンテンツのサイズ (400px) まで拡大する必要があります。<li>

これはCSSで可能ですか？私はいつも<li>JavaScriptで要素を数えて、<ul>そのように幅を設定してきました.

4

2 に答える 2

1

これでうまくいくはずです（フィドルを参照してください。もちろん、overflow: hiddendivにあるために一部が非表示になっています。それを削除すると、機能していることがわかります）：

ul
{
    list-style: none;
    height: 100px;
    white-space: nowrap;
}

li
{
    display: inline-block;
    width: 100px;
    height: 100px;
}

実際ulにサイズを拡大するには (上記のコードだけではありません) 、内容のサイズを取得するには ( fiddle を参照) または適用 ( display: inline-blockfiddleを参照)する必要もあります。float

于 2012-06-01T02:37:11.780 に答える
0

そのように を浮かせる<li>と、効果的に から削除されます<ul>。それがあなたがやりたいことだと確信していますか？リスト全体をフロートしないのはなぜですか？

于 2012-06-01T02:42:56.177 に答える