怎么用margin：auto把导航栏居中
来源：15-2 水平居中设置-定宽块状元素
东0123456789
2016-01-04 22:42
怎么用margin：auto把导航栏居中
写回答
关注
4回答
-
- 烜烜
- 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
设置下导航条的长度吧
初识HTML(5)+CSS(3)-升级版
HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义
1226193 学习 · 18236 问题
相似问题