用于分隔的水平导航的HTML/CSS是什么？

我指的导航是这样的：

home | about | contact

那么，对于这种类型的导航，使用什么样的HTML/CSS最好、最灵活呢？我能想到的最好的办法是将分隔符包装成一个跨度，这样我就可以控制它们周围的间距。例如：

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

|

---

这是最好的方法吗？

这一切都取决于你的目标浏览器，验证严格的HTML4.01是否对你很重要（即：老板/委员会认为这是一件“大事”）或者不是

就个人而言，出于导航菜单的目的，我会将所有内容包装在无序列表中

如果4.01合规性很重要，我会将其包装在div.nav中 如果html5是很酷的（它是很酷的，有一个旧的JS垫片，只要没有委员会参与），我会用

或类似的方式包装所有内容

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

从那里，您可以将每个

元素上的填充设置为您想要的任何内容。 您可以使用

：after

伪选择器在每个图像之后插入“|”或任何您想要的自定义图像（并且您可以使用

：last child:after

确保最后一个图像之后没有图像，如果您想要的话）

您甚至可以使用

a

，将其转换为块元素，并使用填充使整个

li

块可单击，而不仅仅是文本

---

如有必要，请参阅此处的旧版兼容性破解：

您只需为每个元素添加一个左边框，第一个元素除外：

HTML:

​

---

这是相当跨浏览器兼容（IE7+）的，但它可以很容易地用类似IE6的东西填充。感谢Rob W建议使用border left和first child访问更多浏览器

我通常不喜欢使用“|”，因为无法有效地通过像素控制它的高度/宽度。我建议在每个菜单项之间留一个span.space。请看这里：使用

左边框

和。然后，代码还支持IE7和IE8。

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

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