什麼HTML/CSS用於分隔的水平導航？

Question

我指的導航看起來是這樣的：

home | about | contact 

那麼，什麼是最好的和最靈活的HTML/CSS使用這種類型的導航？我能想出的最好的辦法是將分隔符包裹在一個範圍內，以便我可以控制它們周圍的間距。例如：

<a href="#">home</a><span>|</span><a href="#">about</a> 

這是最好的方法嗎？

Answer 1

這一切都歸結於您的目標瀏覽器，如果驗證爲嚴格的HTML4.01對您很重要（即：老闆/委員會認爲這是一件「大交易」）。

就個人而言，出於導航菜單的目的，我將所有內容都包裝在無序列表中。

如果4.01遵從性很重要，我會把它包裝在一個div.nav中 如果html5很酷（這是一個老式的JS-shim，只要沒有委員會參與）將所有內容都包含在<nav id="main-nav">或類似內容中。

<ul><li><a href="/">home</a></li><li><a href="about">about</a></li></ul> 

然後在CSS：

#main-nav li { display : inline-block; list-style : none; } 

從那裏，你可以設置你的填充，以任何你想要的每一個<li>元素。 您可以使用:after僞選擇器來注入「|」或任何自定義圖像，每個之後（你可以使用:last-child:after確保沒有圖像後，最後一個，如果這是你想要的）。

你甚至可以玩a，把它變成一個塊元素，並使用填充來使整個li阻止點擊，而不僅僅是文本。

如果需要，請參閱舊版本的兼容性hack：how to make clickable links bigger。

Answer 2

你可以左邊框簡單地添加到每個元素，除了第一個：

HTML：

​<ul id="nav-list"> 
<li>Home</li> 
<li>Blog</li> 
<li>Link</li> 
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

隨着CSS：

#nav-list li { 
    display: inline-block; 
    border-left: 1px solid black; 
    padding: 4px; 
} 
#nav-list li:first-child { 
    border-left: 0; 
} 
​ 

See the above code in action on jsfiddle! 這個是相當跨瀏覽器兼容的（IE7 +），但它可以很容易地填充像IE32的Selectivizr。感謝Rob W建議使用border-left和first-child來訪問更多的瀏覽器！