Html 水平导航栏在CSS中完成
HTML代码:Html 水平导航栏在CSS中完成,html,css,Html,Css,HTML代码: * { 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-colo
* {
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;
}
欢迎访问我们的网站
页眉
欢迎光临
欢迎光临
欢迎光临
版权所有2010
您好,这是我的CSS和HTML代码,我试图使我的导航栏低于标题栏。但导航栏的结果看起来像楼梯一样曲折。如何使导航栏的按钮变直?
谢谢你的建议,你可以在这里看到
示例如下:
尝试删除此:显示:块; 并将#nav ul li设置为显示:inline 此代码正在运行,但您可以更改它以满足您的需要:
<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代码中的一行,我消除了stairstep问题。注释掉
位置:inherit#nav
块中的code>语句 这是你的标记,导航栏在chrome和IE9中看起来笔直。嗨,巴拉,谢谢你的帮助,非常感谢:)唉,它应该可以工作了,呵呵..谢谢:)谢谢新浪!我现在正在读这个例子,再一次感谢你的参考:D
#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;
}