                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /導(dǎo)航條菜單的制作

怎么把整個(gè)導(dǎo)航欄一起向右移動(dòng)呢

實(shí)踐的時(shí)候想把整個(gè)導(dǎo)航欄一起向右移動(dòng)100PX，但是弄來(lái)弄去只弄到每個(gè)選項(xiàng)都向右移動(dòng)100PX，而不是整體不變向右移動(dòng)。

HW北極熊

2014-11-16

源自：導(dǎo)航條菜單的制作 2-1

關(guān)注問題我要回答

2808

操作

收起

1 回答

Heson
2014-12-01

不知道你要的什么效果，居中的話可以外面加一層div設(shè)置寬度然后margin:0 auto;給你寫了個(gè)小demo，不知是不是你要的效果

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>nav</title>
????<style?type="text/css">
????*{margin:?0;padding:?0;}
????#nav_box{margin:?10px?auto;width:?900px;}
????ul{width:?500px;margin:?0?auto;}
????ul?li{list-style:?none;float:?left;}
????ul?li?a{display:?block;background-color:?#CCC;color:?#000;text-decoration:?none;padding:?10px?20px;}
????ul?li?a:hover{background-color:?#F80;color:?#FFF;}
????</style>
</head>
<body>
<div?id="nav_box">
????<ul>
????????<li><a?href="javascript:;">首頁(yè)</a></li>
????????<li><a?href="javascript:;">關(guān)于我們</a></li>
????????<li><a?href="javascript:;">公司簡(jiǎn)介</a></li>
????????<li><a?href="javascript:;">行業(yè)展示</a></li>
????????<li><a?href="javascript:;">聯(lián)系我們</a></li>
????</ul>
</div>
</body>
</html>

關(guān)鍵就是nav_box跟ul的width、margin屬性設(shè)置