什么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来访问更多的浏览器！