什么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 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块可单击，而不仅仅是文本。

请在此处查看旧的兼容性黑客攻击：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 +），但它可以很容易地填充IE6的Selectivizr之类的东西。感谢Rob W建议使用border-left和first-child来访问更多浏览器！