1

我指的导航看起来像这样：

home | about | contact

那么对于这种类型的导航，最好和最灵活的 HTML/CSS 是什么？我能想到的最好的办法是将分隔符包裹在一个跨度中，以便我可以控制它们周围的间距。例如：

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

这是最好的方法吗？

4

2 回答 2

2

这一切都取决于您的目标浏览器，以及验证是否为严格的 HTML4.01 对您很重要（即：老板/委员会认为这是一个“大问题”）。

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

如果 4.01 合规性很重要，我会将其包装在 div.nav 中<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块可点击，而不仅仅是文本。

请参阅此处的旧 IE 兼容性 hack：如有必要，如何使可点击链接更大。

于 2012-07-22T06:03:54.567 回答
1

您可以简单地为每个元素添加一个左边框，除了第一个元素：

HTML：

​&lt;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;
}
​

在 jsfiddle 上查看上面的代码！ 这是相当跨浏览器兼容的（IE7+），但它可以很容易地用Selectivizr for IE6 之类的东西填充。感谢 Rob W 建议使用左边框和第一个孩子来访问更多浏览器！

于 2012-07-22T08:53:47.630 回答