怎么用margin：auto把导航栏居中
怎么用margin：auto把导航栏居中
东0123456789
2016-01-04
4 回答
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
margin: 30px auto;
border-bottom: 10px solid red;
}
a{
display: block;
float: left;
background: url(http://img1.sycdn.imooc.com//53846438000168f901200060.jpg);
text-decoration: none;
color: #FF4500;
width: 120px;
text-align: center;
line-height: 30px;
}
a:hover{
background-position: 0 -30px;
color: #000;
}
div.nav{
width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻资讯</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>是这样吗？
<nav>//如果没浮动，是块状元素，直接text-align:center;</nav> <nav>//如果没浮动，是块状元素，设置了宽度，直接margin:0 auto;</nav> <nav>//如果没浮动，是行内元素，先display:block;就变成第一种情况，你懂得怎么做。</nav> <nav>//如果没浮动，是行内元素，先display:inline-block;就变成第二种情况，你懂得怎么做。</nav> <nav>//如果左浮了， 直接margin-left:50%;margin-left:-xxxpx; //xxx是你导航宽度的一半。</nav> -------------------------------------------------------- 你的情况是ul没浮动也没设置宽度（是不是要用第一种方法），但 ul中的a浮动了，所以第一种方法不行。 ul是块状元素，给ul设置个宽度，不管里面的内容，直接第二种方法就ok。
举报
0/150
提交
取消
