* {
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 代码，我正在尝试使我的导航栏位于标题栏下方。但导航栏结果看起来像楼梯一样锯齿状。我怎样才能让我的导航栏按钮变直？ 谢谢你的建议，
最佳答案
关于html - 用 CSS 完成的水平导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9260957/