スタイルを設定するユニークなCSSナビゲーションメニュー

Question

私はかなりの量のCSS知識を持っていますが、私が取り組んでいるウェブサイトに固有のナビゲーションバーを実現しようとしているうちに困惑しています。

9000語以上の絵があるので、シナリオを表す図をまとめています。

#container（青）1000px広く、25ピクセルの角を丸くしています。コンテナの上部には、＃コンテナの全幅で、高さが55pxの#navbar（緑色）があります（これは#containerの上端、左端、右端に一致しますが、あなたはそれをより良く見ることができます）。 #navbarの内側にはさまざまなナビゲーションボタン（赤色）があります。私はすべてのボタンが均等に広い（一方の側から他方の側へと常に伸びる）ようにし、左/右にあるボタンを使って、祖父母のような角を丸くします。解決策は純粋で厳格なCSSで、最新のブラウザ（IE 8以降は除く）で動作する必要があります。

私はこれが学習経験であることを望んでいます。コードを投稿する場合は、いくつかの説明をしてください。

Answer 1

HTML：

<nav> 
    <span>1</span> 
    <span>2</span> 
    <span>3</span> 
</nav> 

<div id="container"> 
</div> 

おそらく、リストにそれを有効にする必要があり...

CSS：

nav { 
    display: table; /* see below */ 
    width: 1000px; 
} 
#container { 
    height: 400px; 
    width: 1000px; 
    background: blue; 
    border-radius: 0 0 25px 25px; /* top-left top-right bottom-right bottom-left */ 
} 
nav span { 
    display: table-cell; /* spreads them equally across, no matter how many elements */ 
    height: 55px; 
    background: green; 
} 
nav span:first-child { 
    border-radius: 25px 0 0 0; 
} 
nav span:last-child { 
    border-radius: 0 25px 0 0; 
} 

はここでフィドルです：http://jsfiddle.net/GHVSZ/

Answer 2

更新：

チェックこのフィドル：http://jsfiddle.net/jQpF8/4/

が、これは何が必要でしょうか？

等幅を設定するには、リンク数を動的に変更する場合は、パーセンテージ（ナビバーの全幅/リンク数）を手動で設定するか、JSを使用して設定してください。

Answer 3

常に3つのアイテムしか持っていない場合は、最初の2つに33％の幅を、3番目のアイテムには幅を与えることができるので、最後まで伸ばして2つのクラスを追加することができます。最後に「last-item」を指定すると、ボーダー左上の半径とボーダーの右上の半径を与えることができます