質問: 一定数の水平ナビゲーションアイテムを指定されたコンテナー全体に均等かつ完全に引き伸ばす方法 6つのnavアイテムを900pxコンテナに均等に引き伸ばし、その間に均等な空白を入れたいです。例えば...---| 900px container |--- ---| home about basic services specialty services our staff contact us |--- 現在、これを行うための最良の方法は次のとおりです。nav ul { width: 900px; margin: 0 auto; } nav li { line-height: 87px; float: left; text-align: center; width: 150px; } これに関する問題は2つあります。まず第一に、それは本当にそれを正当化するのではなく、liタグをulタグ全体に均等に広げます。 。2番目の問題は、navアイテムが150pxを超えるとレイアウトが壊れるということです。これは、specialty servicesです。nav全体に十分なスペースがあるにもかかわらずです。誰も私のためにこれを解決できますか?私はソリューションを求めてwebを精査してきましたが、それらはすべて不足しているようです。 css/html可能な場合のみ...ありがとう!更新(7/29/13):table-cellを使用することが、このレイアウトを実装するための最新の最良の方法です。以下のfelixの回答をご覧ください。 table cellプロパティ ブラウザの94%で動作 現在。 ie7以下について何かする必要がありますが、それ以外は大丈夫です。更新(13/30/13):残念ながら、このレイアウトをメディアクエリと組み合わせている場合、これに影響するwebkitのバグがあります。今のところ、「display」プロパティの変更を避ける必要があります。 webkitのバグを参照 更新(7/25/14):text-align:justifyを含む、これに対するより良い解決策があります。これを使用する方が簡単で、webkitのバグを回避できます。
回答: 私は上記のすべてを試してみて、彼らが望んでいることがわかりました。これは、私が考え出した最も単純で最も柔軟なソリューションです(インスピレーションについては上記のすべてに感謝します)。html<div id="container"> <ul> <li>home</li> <li>about us</li> <li>services</li> <li>previous projects</li> <li>testimonials</li> <li>news</li> <li>research &amp; dev</li> <li>contact</li> </ul> </div> cssdiv#container{ width:900px; background-color:#eee; padding:20px; } ul { display:table; width: 100%; margin:0 0; -webkit-padding-start:0px; /* reset chrome default */ } ul li { display:table-cell; height:30px; line-height:30px; font-size:12px; padding:20px 10px; text-align: center; background-color:#999; border-right:2px solid #fff; } ul li:first-child { border-radius:10px 0 0 10px; } ul li:last-child { border-radius:0 10px 10px 0; border-right:0 none; } 明らかに、最初/最後の子ラウンドエンドをドロップすることができますが、私はそれらが本当に純粋だと思います(そしてあなたのクライアントもそうです;)コンテナの幅によって水平リストが制限されますが、これを捨てて、必要に応じて絶対値をulに適用することができます。あなたが好きなら、それをいじる.. http://jsfiddle.net/tobyworth/esehy/1/