float 问题
这里为什么要用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就行了.