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

如何讓導(dǎo)航條居中？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

*{margin:0 ; padding:0; font-size:14px;}

.a{margin:0 auto;width:100%;}

ul{ list-style:none;}

a{color:#333;text-decoration:none}

.nav{margin:0 auto;width:800px;}

.nav li{ float:left;}

.nav li a{ display:block; text-align:center; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-left:1px;}

.nav li a:hover{ background-color:#F60; color:#fff}

</style>

</head>

<body>

? ? <li><a href="#">首　　頁</a></li>

? ? <li><a href="#">新聞快訊</a></li>

? ? <li><a href="#">產(chǎn)品展示</a></li>

? ? <li><a href="#">售后服務(wù)</a></li>

? ? <li><a href="#">聯(lián)系我們</a></li>

? </ul>

</body>

</html>

慕先生8224389

2016-09-15

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

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

5336

操作

收起

4 回答

慕粉3951534 回答被采納 +3 積分
2016-09-22

兩種方法，定寬：

<style?type="text/css">
*{margin:0?;?padding:0;?font-size:14px;}
a{color:#333;text-decoration:none}
ul.nav?{
????list-style:?none;
????width:?500px;
????margin:?0?auto;
????}
.nav?li{?
????float:left;
????}
.nav?li?a{?display:block;?text-align:center;?height:30px;?line-height:30px;?width:100px;?background-color:#efefef;}
.nav?li?a:hover{?background-color:#F60;?color:#fff}
</style>

不定寬：

<style?type="text/css">
*{margin:0?;?padding:0;?font-size:14px;}
a{color:#333;text-decoration:none}
ul.nav?{
????list-style:?none;
????float:?left;
????position:?relative;
????left:?50%;
}
.nav?li{?
????float:left;
????position:?relative;
????left:?-50%;
}
.nav?li?a{?display:block;?text-align:center;?height:30px;?line-height:30px;?width:100px;?background-color:#efefef;}
.nav?li?a:hover{?background-color:#F60;?color:#fff}
</style>

你的代碼里?.a{margin:0 auto;width:100%;} 這一行沒作用，雖然 a 設(shè)置為 block 了，但 a 的父元素是 li ，這樣設(shè)置最多讓 a 在 li 中居中，而不是 ul 整體居中。

至于你問為什么 800px 不行，其實(shí) 800px 是可以的，你的代碼其實(shí)是有居中效果的，只是 ul 的寬度為 800px，而 li 總共寬度只有 505px，所以最右邊的 295px 是透明的，看不見，你可以給 ul 設(shè)置一個(gè)高度，再設(shè)置一個(gè)背景色，你就能看出來，ul 其實(shí)已經(jīng)居中了。