怎么用margin：auto把导航栏居中

个回答

烜烜: 2016-01-15 10:45:35

<!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://img.mukewang.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>

是这样吗？

lingshihacker: 2016-01-05 11:20:01

<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。

堂堂堂堂糖糖糖童鞋: 2016-01-04 22:53:43

ul{width:1000px; margin:0 auto}//为容器设置宽度之后，两边的外边距自动适应，就居中了！

Perona

2016-01-04 22:50:32

设置下导航条的长度吧

0