如何让导航条居中？

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

</ul>

</body>

</html>

慕先生8224389

2016-09-15

源自：导航条菜单的制作 2-3

关注问题我要回答

5189

操作

收起

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 设置为 block 了，但 a 的父元素是 li ，这样设置最多让 a 在 li 中居中，而不是 ul 整体居中。

至于你问为什么 800px 不行，其实 800px 是可以的，你的代码其实是有居中效果的，只是 ul 的宽度为 800px，而 li 总共宽度只有 505px，所以最右边的 295px 是透明的，看不见，你可以给 ul 设置一个高度，再设置一个背景色，你就能看出来，ul 其实已经居中了。