親の硬い幅を設定しない要素の中央の流体グリッド

Question

サイズを変更すると、中央に調整される要素の「グリッド」を中心にしたいと思います。このよう

：私はmax-width設定しようとしましたが、サイズを変更する場合、それは、この問題につながる

___________________ 
|     | 
| [] [] [] [] | 
| [] [] [] [] | 
| [] [] []  | 
------------------- 
________________ 
|    | 
| [] [] [] | 
| [] [] [] | 
| [] [] [] | 
| [] []  | 
---------------- 
_____________ 
|    | 
| [] [] | 
| [] [] | 
| [] [] | 
| [] [] | 
| [] [] | 
| []  | 
------------- 

：

________________ 
|    | 
| [] [] [] | 
| [] [] [] | 
| [] [] [] | 
| [] []  | 
---------------- 
_____________ 
|    | 
| [] []  | 
| [] []  | 
| [] []  | 
| [] []  | 
| [] []  | 
| []   | 
------------- 

私はメディアクエリを使用して、ハードwidthsを設定することを検討していません（さらにはmax-widths）をすべての構成に対して真の解決策とします。

私はCSS3を正常に機能しなくて、JavaScriptを避けたいのであれば、私はCSS3を公開しています。

編集：非意味要素を追加することもまた、取引の中断者であり、コンテナdivまたは何かが受け入れ可能だが理想的ではない。

次のようなマークアップは次のようになります。ここでは

<ul> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
</ul> 

はあなたが始めるためにdemoです。

ありがとうございます。

Answer 1

あなたの正確な要件がセンタリングのためのものであるかどうかは少し曖昧です（上のすべてのイラストは偶数の要素を表示するので、奇数の場合は何を期待しているのか分かりません）私はちょうどulにtext-align: centerを追加しましたセンタリング効果（http://jsfiddle.net/nR9Mk/1/）を達成し、しかし、あなたが望む通りに動作している場合、私は知りません

更新：あなたが偶数のみを扱っている、あなたがしたい場合それらを2つにグループ化したままにしておくと、これは機能します：http://jsfiddle.net/nR9Mk/8/。

ROUND 2：あなたの明らかにされた「奇数」要件に基づいて、私はうまくいくソリューションを考え出しました。注：1）余分なHTMLマークアップが必要です。2）実用的な制限を設定して、どれくらい広げたいのか、それでも効果を得る必要があります。 Hereは、 "バッファ"要素がoutlineで、コードがhereでアウトラインが削除されているコードです。

ROUND 3：私はあなたがすでに私の答えを受け入れていることを知っていますが、私はすでにこれに取り組んでいたので、とにかくそれを提供すると思いました。あなた（または他の誰か）に役立つかもしれない取引のコメント（here is a modified plan）に基づいています。それはハイブリッドです - 「時には」要素を左に押し出します（通常は最も扱いにくいとき）、時にはそれらを「列から外れない」ようにしますが、中心に置くことができます。これを平凡な "奇妙な"ものと見なさないようにするには、幅が6列のmax-widthが与えられます。