我所指的导航看起来像这样:
home | about | contact
那么用于此类导航的最佳和最灵活的HTML / CSS是什么?我能想到的最好的事情是将分隔符包裹在一个跨度中,以便我可以控制它们周围的间距。例如:
<a href="#">home</a><span>|</span><a href="#">about</a>
这是最好的方法吗?
答案 0 :(得分:2)
这一切都归结为你的目标浏览器,如果验证严格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,如有必要。
答案 1 :(得分:1)
你可以简单地为每个元素添加一个左边框,除了第一个元素:
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来访问更多浏览器!