如何顯示具有所需邊框的導航標籤？表，列表，別的東西？

Question

看到上圖。每個導航選項卡需要在兩側分離2個像素，並與邊緣上的標題圖像完全對齊。

現在他們想介紹第5個導航選項卡（也可能是第6個）。是否有可能以這種方式編寫代碼，在這種方式下，您可以在其中粘貼第5或第6個選項卡，並且所有內容都可以使用列表或表格或其他解決方案進行適當調整？仍然保持2像素分離，並與邊緣完全對齊？我不確定是否有可能，或者您只需根據所涉及的數學數據爲每個選項卡定義寬度，以便將其全部正確地與邊緣齊平。

Answer 1

這可能並不容易。大多數CSS水平菜單類型顯示實現中的一個要求是爲每個元素設置固定寬度。如果你嘗試做百分比，事情就會開始分崩離析。但是，任何事情都是可能的。

Answer 2

我認爲最好的方法是用CSS模擬表格行爲。所以你可以使用列表，並且仍然可以獲取表格行爲。

ul { 
    display:table; 
} 
li { 
    display:table-cell; 
} 

Here is a demo顯示此與CSS和適當的標記。 Here's a demo它看起來如何與實際的表。我不確定IE 8支持這種CSS，因此可能需要注意。

UPDATE：已確認：本機不支持IE6或7。如果你想支持這些瀏覽器，你可能會被卡住表格或硬編碼寬度。可能有一個JavaScript修復程序來支持這些值，但我並不知道它。

編輯：我意識到我的演示者不拘小節，所以我做了另一種解決實際你對利潤點，它使用:first-child選擇從第一鏈接去除餘量，給分佈均勻的外觀。 http://jsfiddle.net/wesley_murch/pe6wd/3/

Answer 3

您是否嘗試過查看LESS或SASS，以便您可以在CSS中進行簡單的數學計算？