我在一个小型律师事务所的网站上工作。顶部有一个菜单栏,我希望与|等距离每个项目之间: Link。 (标题横幅下方的白色条)
这看起来完全正确,但我正在使用表来完成它。使用XHTML / CSS执行此操作是否有“更正确”的方法?
我的代码如下:
<div id="topMenu" class="spanningMenu">
<table>
<tr>
<td class="topMenuEnd"></td>
<td class="topMenuMiddle"><a href="index.htm">Home</a></td>
<td class="topMenuMiddle">|</td>
<td class="topMenuMiddle"><a href="contact.htm">Contact Us</a></td>
<td class="topMenuMiddle">|</td>
<td class="topMenuMiddle"><a href="directions.htm">Directions</a></td>
<td class="topMenuMiddle">|</td>
<td class="topMenuMiddle"><a href="disclaimer.htm">Disclaimer</a></td>
<td class="topMenuEnd"></td>
</tr>
</table>
</div>
CSS:
.spanningMenu {
border-style: solid;
border-width: 4px 0px;
padding: .2em;
}
#topMenu td.topMenuMiddle {
width: 12.5%;
}
#topMenu td.topMenuEnd {
width: 6.25%;
}
我喜欢我的解决方案,因为它非常强大,但它确实在HTML中有布局信息,我一直在努力避免。
答案 0 :(得分:2)
好的,布局表是错误的,MENUS表只是反常......
Please please please read this
你应该这样做:
<ul>
<li>Item1 |</li>
<li>Item2 |</li>
<li>Item3</li>
</ul>
ul li {
float:left;
margin-left:5px;
}
答案 1 :(得分:1)
通常认为导航栏是一个链接列表,因此它应该在<ul></ul>
标签中。
我不会包含竖线字符|
,因为它也是 表示。您可以使用li:after { content: "|"; }
或添加CSS border
属性在CSS中添加它。
有关横向设置列表样式的信息,请查看Listamatic。
答案 2 :(得分:1)
我刚刚一起黑客攻击,给你一个想法。这是我一直使用的方法。您可以根据需要调整宽度。这是一个小提琴:http://jsfiddle.net/pfkgw/
#menu {
background:#ECD8B1;
overflow:auto;
border-top: 2px solid white;
border-bottom: 2px solid white;
padding: 5px 0px;
}
ul li {
width: 24%;
border-right:1px solid #000;
float:left;
text-align:center;
}
ul li.last {
border-right:none;
}
li a {
display:block;
padding:5px;
color:#000;
}
<div id='menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Directions</a></li>
<li class='last'><a href='#'>Disclaimer</a></li>
</ul>
</div>
答案 3 :(得分:0)
试试这个:
<style type="text/css">
#menu { width: 100%; }
#menu a { display: block; float: left; width: 20%;
border-right: 1px solid #000; text-align: center; }
#menu a.last { border-right: 0px solid #000; clear: both; }
</style>
<div id="menu">
<a href="/">Link 1</a>
<a href="/">Link 2</a>
<a href="/" class="last">Link 3</a>
</div>