CSSとHTMLのグリッドのようなリスト項目のレイアウト方法は？

Question

ではなく、のdivブロックが固定幅を持っています。

内側には、<ul> <li>..</li>ブロックがあり、11個のアイテムがあります。 は、私はこれらの<li>アイテムはすべてこのような等しい幅で、divの内側に記載されていることがしたいと思います：

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

しかし、私は全くそれを並べ替えることはできません。

左と右でフロートを試みましたが、中央の3つの要素は中央に配置されません。

これを行うにはどうすればよいですか？

ありがとうございます！

Answer 1

最も簡単な解決策は、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> 

これは、それができる最善のように列を均等化します。ただし、要素が完全に等しくない場合は、中心ではなく右から要素を取り除きます。

Answer 2

this StackOverflowの質問によると、Inline Blocksは必要なだけかもしれません。

ああ、まだ実装していない場合は、必ずCSS Gridsも調べてください。自分でCSSグリッドを作成したくない場合は、this oneが素晴らしいです。

Answer 3

The link上記のヨルダンは、特に古いブラウザのサポートに関しては素晴らしいリソースです。グーグルのオフこのページに上陸他人のためのクイックリファレンスについては、中央に、インラインブロックのグリッドを作成するための基本的なCSSは次のとおりです。

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

li { 
    display: inline-block; 
    vertical-align: top; 
}