水平導航欄在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;聲明。