use*_*766 4 html css navigation
关于如何将文本放在导航栏上,就像它只向左移动一样,我有点难过.我已经尝试过中心对齐,但它仍然继续坚持到一边.如果有人能告诉我我犯了什么错误,我将不胜感激.
HTML:
<body>
<div id="wrap">
</div>
<ul id="nav">
<li><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
<div id="content">
</div>
</body>
CSS:
body {
margin: 0;
padding: 0;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
background-color:#425eb4;
}
*{
margin: 0 auto 0 auto;
}
#wrap {
height:150px;
background:url(images/header1.png) no-repeat center;
text-align:center;
background-color:#FFF;
}
#nav {
width: 100%;
float: left;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left;
text-align:center; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
text-align:center;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
text-align:center;
background-color: #fff;}
/* End navigation bar styling. */
#content {
padding: 0 50px 50px;
width:1000px;
height:800px;
background-color:#FFF;
}
你需要float:left取消你#nav和你的li元素.然后添加display:inline-block;到两者.接下来添加你text-align:center的#nav.
#nav {
width: 100%;
display: inline-block;
text-align: center;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
margin-left: 0px; // looks like bootstrap is putting a left margin on your #nav you may want it off.
}
#nav li {
display: inline-block;
text-align:center;
}