0

<li>左にフロートする必要のあるノードがたくさんあります。左にフロートしたときのこれらのノードの幅の合計は、親コンテナーよりも大きくなります。親ノードの幅を増やす代わりに、親<li>の高さを拡張して、基本的に次の行に流れます。

この問題に対するCSSソリューションはありますか、それとも子の数に基づいて親ノードのサイズを変更するjQueryスクリプトが必要ですか？

4

4 に答える 4

1

CSS ソリューションはありません。あなたが提案するように、あなたはjQueryでそれを達成することができます。

于 2012-12-04T18:22:14.180 に答える
0

浮動要素の直接の親にはdisplay:inline-blockプロパティが必要です。

于 2012-12-04T18:32:55.493 に答える
0

問題が何であり、どの問題を解決したいのかについて 100% 明確であるかどうかはわかりませんが、CSS のみを使用します。

親の高さを Li の高さと同じに設定すると、Li が親の高さを引き伸ばさないようにすることができます。

オーバーフロー:hidden; スクロールバーが必要でない限り、親にも必要な場合があります。

于 2012-12-04T18:28:32.043 に答える
0

私はあなたが求めていることを理解していると思いますが、そうではないかもしれません. これをチェックしてください。私は CSS を使いすぎましたが、要点を説明しただけです。これがフィドルです。

<div class="navItems">
    <div class="navOutline">
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <!-- Add more items and it'll expand -->
            <li><a href="#">Item 5</a></li>
        </ul>
    </div>
</div>

.navItems ul { list-style:none; margin:0; padding:0; }
.navItems li { display:inline; }
.navItems li:not(:last-child) { margin-right:10px }
.navItems .bumper { margin-right:15px; }
.navItems {
    float:left;
    font-size:14px;    
    padding:5px;
    background:#FFF;
    box-shadow:0px 0px 20px rgba(0,0,0,0.25);
    -o-box-shadow:0px 0px 20px rgba(0,0,0,0.25);
    -ms-box-shadow:0px 0px 20px rgba(0,0,0,0.25);
    -moz-box-shadow:0px 0px 20px rgba(0,0,0,0.25);
    -webkit-box-shadow:0px 0px 20px rgba(0,0,0,0.25);
}
.navOutline {
    margin:auto auto;
    padding:10px;
    background:#FFF;
    border:1px dashed #CCC;
}
.navItems a { text-decoration:none; color:#000; }​
于 2012-12-04T18:28:56.840 に答える