3

が<ul> <li>あり、 を使用する必要がありますdisplay: inline-block;。これは、最後の要素がその親コン​​テナーの 100% 幅であり、li の量に制限がある場合に、li を「フローティング」するために必要です (フローティングとは、含まれる要素の幅に応じて、li の量が有限であることを意味します)。 . したがって、全体<ul>の幅はビューポートの幅よりも大きくなります。

これは問題ありませんが、「フローティング」要素を複数行にする必要があり、複数行ではないすべての要素が<ul>.

JSでの高さを設定することで目的を達成できます<ul>が、これは本当にやりたくないことです。

これがJSフィドルです。 http://jsfiddle.net/d5WBv/3/

誰にも解決策がありますか。フレックスボックスがこれを解決できるかどうかはわかりませんdisplay: table;が、解決できないようです....

ありがとう！

4

2 に答える 2

3

たぶん、リーはみんな同じ高さでなければならないということですか？

もしそうなら、あなたはそれらをテーブルセルとして表示することができます:

ul {
    display: table;
    width: 100%;
}

li {
    vertical-align: top;
    display: table-cell;
    padding: 10px;
    margin: 0;
}

また、更新された fiddleを確認してください。

于 2013-09-27T10:15:44.357 に答える