水平导航栏在CSS做

Question

* { 
border: 0px; 
margin: 0px; 
padding: 0px; 
} 
body { 
background-color: #FFC; 
} 
#wrapper { 
width:70%; 
margin: 0% auto; 
} 

#header { 
background-color: #C1D1FD; 
padding: 3%; 
} 

#nav { 

clear:both; 
padding: auto; 
position:inherit; 
background-color:#F0D5AA; 
width: auto; 

} 
#nav ul { 
list-style-type:none; 

} 

#nav a { 
display:block; 
float:left; 
padding:0%; 
width:20%; 
background-color:#F60; 
border-bottom:1px #fff solid; 

} 

#content { 
padding:7%; 
margin-left: 20%; 
background-color:#fff; 

} 

#footer { 
background-color: #C1D1FD; 
padding: 2%; 
text-align:center; 
} 

HTML代码：

<form id="form1" runat="server"> 
<div id="wrapper"> 
    <div id="header"> 
     <h1>Welcome to our Website</h1> 

    <div id="nav"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Products</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> <!-- end nav--> 
    </div> <!-- end header--> 
    <div id="content"> 
     <h2>Page Heading</h2> 
     <p>welcome</p> 
     <p>welcome</p> 
     <p>welcome</p> 
    </div> <!-- end content--> 
    <div id="footer"> 
     <p>Copyright 2010</p> 
    </div> <!-- end footer--> 
</div><!-- end wrapper--> 
</form> 

你好，这是我的CSS & HTML代码，我尝试让标题栏下面我的导航栏。但导航栏结果显示为像楼梯一样的锯齿状。我怎样才能使我的导航按钮直？ 谢谢你的建议，

Answer 1

您可以在这里看到，

http://www.cssnewbie.com/super-simple-horizontal-navigation-bar/

例子这里：

http://www.cssnewbie.com/example/horizontal-menu/

Answer 2

尝试删除这个：显示：块; 并设置#nav ul li来显示：inline;

这段代码是沃金，但你可能会改变它来满足您的需求：

#nav { 
background-color:#F0D5AA; 
} 
#nav ul { 
list-style-type:none; 
padding-top:3px; 
padding-bottom:3px; 
} 
#nav ul li { 
display:inline; 
} 
#nav a:link, a:visited { 
text-align:center; 
padding:3px; 
} 

Answer 3

我在原来的CSS代码删除一行根除阶梯问题。在#nav区块内注释掉position:inherit;声明。