css - CSS - 複数行のリストを中央揃えにする

Question

複数行のリストを div 内で一元的に配置したいと思います。

http://jsfiddle.net/8Wu2S/

この例では、ul達成したいことを示すために固定幅を設定しています。ただし、ulリスト項目 (固定幅) だけが含まれるように、幅を動的にする必要があります。つまり、収まるように縮小します。リスト項目の各行は左から開始し、新しい行に入る前にできるだけ多くの項目に収まるようにする必要があります。

はdiv可変幅なので、たとえば、divが少し広い場合は次のようになります。

http://jsfiddle.net/8Wu2S/1/

いろいろやってみたけど、思ったより難しそう！

Answer 1

ul {
    background-color: red;
    width: 80%;
    margin: 0 auto;
}
li {
    display: inline-block;
    width: 49%;
    border: 1px solid black;
}

box-sizing: border-box私は49％を使用しましたが、CSSを使用してそれを回避し、50％を使用することができます。

Answer 2

ul 要素と li 要素をインラインで表示するように設定します。

 <div style="width:20%;">
     <ul style="display:inline;">
       <li style="display:inline;">Foo</li>
       <li style="display:inline;">bar</li>
     </ul>
 </div>

jsFiddle の例: http://jsfiddle.net/QcNTW/4/

Answer 3

私は本質的に同じ問題を見つけることができました：

CSS - 内部にラップされたフロートを含む DIV を、フロートを保持するために必要なだけ大きくする方法は?

良い解決策がないことがわかりました。1 つの方法は、メディア クエリを使用して の幅を設定することulです。もう 1 つの方法は、 Masonry のような jQuery プラグインを使用することです。

いずれにせよ、私はおそらく自分のサイトで Masonry を使用するつもりだったので、JavaScript を使用しないユーザーは非中央配置のレイアウトにフォールバックして、このルートをたどると思います。