Question

因为我在网站的导航栏上工作了几天。但我想把它集中在一起。这是我的CSS

.nav{
    float:right;width:980px
}
.nav ul {
    width: 980px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    font-size: 1.5em;
    font-weight: 300;
}
.nav li {
    float: right;
    width: 87px;
    text-align: center;
    -webkit-transition: border .5s;
    -moz-transition: border .5s;
    -o-transition: border .5s;
    -ms-transition: border .5s;
    transition: border .5s;
}
.nav a {
    display: block;
    width:87px;height: 74px;
}
.no-touch .nav a:hover ,
.nav a:active ,
.nav a:focus {
    height: 84px;
}   
.nav li span {
    display: block;
    font-family:"Droid Arabic Kufi";

Answer 1

导航栏上的浮动广告是不必要的，而.nav上的点击会阻止.nav ul居中。

.nav {
   float: right; // Remove this.
   width: 100%; // Change this.
}

http://jsfiddle.net/7TBHn/2/

虽然在我的jsfiddle中我使用nav元素更具语义，但除此之外它没有任何区别。

Answer 2

将其放入.nav ul：

margin-left:auto;
margin-right:auto;

这应该以它为中心。希望这有帮助！

使用CSS将我的导航栏居中

2 个答案: