这里为什么要用float:left;不是有display:inline; 了吗?应该都在一行上了？
<div id= "nav ">
<ul>
<li> <a href= "../../../default.htm "> Home </a> </li>
<li> <a href= "../../../about/default.htm "> About </a> </li>
<li class= "sel "> <a href= "../../default.htm "> Archive </a> </li>
<li> <a href= "../../../lab/default.htm " title= "Coding examples and translated articles "> Lab </a> </li>
<li> <a href= "../../../reviews/default.htm " title= "Book reviews and music recommendations "> Reviews </a> </li>
<li> <a href= "../../../contact/default.htm "> Contact </a> </li>
</ul>
</div>
/*
=Navigation
*/
#nav {
clear:both;
padding-top:3px;
}
#nav ul {
float:left;
width:100%;
margin:0;
padding:0;
list-style:none;
background:#d41e00 url(../i/nav-tab.gif) repeat-x;
}
#nav li {
display:inline;
margin:0;
padding:0;
}
#nav a {
display:block;
float:left; /* ??*/
width:auto;
margin:0;
padding:0 16px;
border-right:1px solid #bb1600;
border-bottom:none;
border-left:1px solid #fe633a;
color:#fff;
background:#d41e00 url(../i/nav-tab.gif) repeat-x;
font:bold 1.1em/2.5 "Century Gothic ", "Trebuchet MS ",Helvetica,Arial,Geneva,sans-serif;
text-transform:uppercase;
text-decoration:none;
letter-spacing:1px;
}
------解决方案--------------------
inline只是说让它呈行显示.但是你却用在了 <li> 这个标签上.我们都知道, <li> 这个标签是自上而下的,例如:
.option1
.option2
.option3
我们可以理解为每项对应第一项基点有一个横,纵坐标(只是理解哈)而display:inline是让它们水平方向呈直线显示.但它没有管纵坐标.所以会出现这种情况:
.option1
.option2
.option3
一般来说我们都直接在li里用float:left就行了.