亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

怎么用margin：auto把導航欄居中

568a84a70001c18b05000207.jpg

568a84a800019d4205000272.jpg怎么用margin：auto把導航欄居中


正在回答

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>

是這樣嗎？

http://img1.sycdn.imooc.com//56985d450001909d15760496.jpg

0 回復 有任何疑惑可以回復我~ 
<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 回復 有任何疑惑可以回復我~
#1

東0123456789 提問者

這樣只是下面紅色的邊居中，導航沒有居中
2016-01-05 回復 有任何疑惑可以回復我~
#2

lingshihacker 回復 東0123456789 提問者

根據你的代碼，給ul設置寬度，然后margin:0 auto;整體是會居中的。第二種方法就是給li設置寬度，然后margin:0 auto;也會居中
2016-01-08 回復 有任何疑惑可以回復我~ 
ul{width:1000px;?margin:0?auto}//為容器設置寬度之后，兩邊的外邊距自動適應，就居中了！
0 回復 有任何疑惑可以回復我~
#1

東0123456789 提問者

這樣只是下面紅色的邊居中，導航沒有居中
2016-01-05 回復 有任何疑惑可以回復我~
#2

堂堂堂堂糖糖糖童鞋 回復 東0123456789 提問者

那你把代碼發出來，我幫你調試調試！
2016-01-05 回復 有任何疑惑可以回復我~

設置下導航條的長度吧

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

怎么用margin：auto把導航欄居中

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號