复一日地创建CSS菜单,但我以前从未遇到过这个问题,这真的让我感到困惑! :S
我已经尝试了我能想到的一切,但没有运气。在 Chrome 中它工作正常,但在 Firefox 中,最后一个链接会步入新行,在 IE 中,最后 2 个链接会步入新行。
如果我删除填充,所有链接都保持在同一行上。
看看我在这里的意思...http://dlclients.com/estates/,但这里是导致问题的 CSS 和 HTML 的摘要。
nav{
background: url(images/background_nav.png) repeat-x;
height: 30px;
position: absolute;
left: 0;
width: 100%;
margin-top: 20px;
}
#nav-inner{width: 1000px; height: 30px;}
#nav-inner ul{list-style: none; margin: 0; padding: 0; width: 1070px;}
#nav-inner ul li{
display: inline;
overflow: auto;
}
#nav-inner ul li a{
display: block;
color: white;
text-decoration: none;
font-size: 12px;
float: left;
height: 30px;
line-height: 30px;
border-right: 1px solid #6D6E71;
padding: 0 14px;
}
#nav-inner ul li a.last{border: none;}
#nav-inner ul li a:hover{
border-bottom: 4px solid white;
}
该网页:
<nav>
<div id="nav-inner">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Buy</a></li>
<li><a href="#">Sell</a></li>
<li><a href="#">Rent</a></li>
<li><a href="#">Landlords</a></li>
<li><a href="#">Property Maintenance</a></li>
<li><a href="#">Commercial/Land</a></li>
<li><a href="#">Short Term Let/Olympics</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#" class="last">Contact Us</a></li>
</ul>
</div>
</nav>
希望你能帮助解决这个问题,因为我花了 2 个多小时试图解决这个问题?!?
ul 和 li 具有浏览器定义的填充和边距的预设值,除非在 CSS 中明确设置。尝试在 CSS 的第一行上方添加以下内容,并相应地设置其余类的样式:
ul, li {margin:0; padding:0;}