[英]Horizontal list item width different in Firefox and Chrome
我有以下HTML水平列表:
<div id="menu">
<ul>
<li class="menu_item">
<a href="#">
Item1
</a>
</li>
<li class="menu_item">
<a href="#">
Item2
</a>
</li>
<li class="menu_item">
<a href="#">
Item3
</a>
</li>
<li class="menu_item">
<a href="#">
Item4
</a>
</li>
<li class="menu_item">
<a href="#">
Item5
</a>
</li>
</ul>
</div>
使用以下CSS设置样式:
#menu {
position: relative;
width: 715px;
height: 40px;
}
#menu > ul {
display: block;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
width: 100%;
height: 100%;
}
#menu > ul > li {
display: table;
height: 100%;
text-align: center;
float: left;
border-right: 1px solid black;
width: 142px !important;
}
Firefox正确显示; 但是,在Chrome中,所有项目的宽度都是141px而不是142.我不能只将数字增加1,因为它在Firefox中太宽而且不适合一行。
我能做些什么呢? 请帮忙。
编辑:截图:
Chrome列表: img694.imageshack.us/img694/5088/chromelist.png
Firefox列表: img840.imageshack.us/img840/8689/firefoxlist.png
编辑2:如果我从'ul'删除border-top和-bottom并添加到'li'然后在Chrome中它不再是141px而是... 143px。 我不知道改变垂直边界会如何影响宽度......
如果你删除display: table;
他们也应该这样做。
您需要添加list-style-type:none
和一些填充以对齐文本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.