我的CSS知識相當數量，但同時努力實現的一個網站，我工作的一個獨特的導航欄我已經難住了。如何獨特的風格CSS導航菜單
由於圖片是價值超過9000個字，我把一個圖來表示的情況。
的#container的（藍色）是1000像素寬且具有25像素圓角。容器的頂部是#navbar（綠色），它是#container的整個寬度，高度爲55px（它與#container的頂部，左側和右側邊緣相匹配，但我在圖像中放大了它）你可以看到它更好）。 #navbar的內部是不同的導航按鈕（紅色）。我希望所有的按鈕都是同樣寬的（並且總是從一側延伸到另一側），而最左側/最右側的按鈕具有像祖父母#container那樣的圓角。該解決方案需要純粹且嚴格的CSS，並且可以在大多數現代瀏覽器（除IE 8及以下版本）之外工作。
我想這是一個學習的過程，因此，如果您發佈的代碼，請提供一些解釋。
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/
更新：
檢查此琴：http://jsfiddle.net/jQpF8/4/
這是你需要什麼？
設置相等的寬度，應手動設置使用百分比的寬度（導航欄的總寬度/無。的鏈接）的鏈接，或者通過在JS的動態改變的鏈接數的情況下進行設置。
如果你總是隻有3個項目，你可以給他們的前2個的寬度爲33％，並且自動到第3個 - 這樣他們被拉伸到最後，還增加2個類 - 第一個菜單項上的「第一項」和「最後一個項目」上的最後一個，所以你可以給他們邊框左上角的半徑和邊框右上角半徑
完美。 'display：table;'正是我需要的！ – Sonic42 2012-01-01 02:36:26
請注意，IE7不支持'display：table'。但這似乎並不影響你，因爲你只對IE9及以上版本感興趣。 – 2012-01-01 02:38:29
我想要一個適用於IE7的解決方案，但坦率地說，我厭倦了迎合無知者的需求。 「邊界半徑」在IE9之前無法運行，但任何仍在使用IE8的人都可以處理他們的直角。 ;） – Sonic42 2012-01-01 02:50:23