15

幅が固定されていないdiv ブロックがあります。

中には、<ul> <li>..</li>11個のアイテムが入ったブロックがあります。これらの<li>アイテムを div 内にリストし、次のようにすべて同じ幅で表示したいと思います。

##item##  ##item##  ##item##
##item##  ##item##  ##item##
##item##  ##item##  ##item##
##item##            ##item##

とはいえ、全然整理できません。

左右にフロートしてみましたが、中央の3要素が中央揃えになりません。

これを機能させるにはどうすればよいですか？

ありがとう！

4

4 に答える 4

32

Jordan が投稿した「インライン ブロック」リンクは、特に古いブラウザーのサポートに関しては、優れたリソースです。Google からこのページにアクセスする他のユーザーのクイック リファレンスとして、中央揃えのインライン ブロック グリッドを作成するための基本的な CSS は次のとおりです。

ul {
    margin: 0 auto;
    text-align: center;
}

li {
    display: inline-block;
    vertical-align: top;
}
于 2014-02-10T13:40:03.313 に答える
26

最も簡単な解決策は、CSS 列を使用することです。

http://jsfiddle.net/6tD2D/ (プレフィックスは含まれていません)

ul {
    columns: 3;
}

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
</ul>

これにより、列が可能な限り均等化されます。ただし、完全に等しい要素が十分にない場合は、中央ではなく右側から要素を削除し始めます。

于 2013-02-14T22:23:59.227 に答える
3

このStackOverflow の質問によると、インライン ブロックはまさに​​必要なものかもしれません。

ああ、まだ実装していない場合は、必ずCSS Gridsも調べてください。自分で CSS グリッドを構築したくない場合は、これが最適です。

于 2013-02-14T22:25:17.213 に答える