居中CSS和CSS

Question

后，我有下面的代码：

.header { 
 
    height: 50px; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    -webkit-box-shadow: 0px 2px 3px 0px rgba(50, 50, 50, 0.75); 
 
    -moz-box-shadow: 0px 2px 3px 0px rgba(50, 50, 50, 0.75); 
 
    box-shadow: 0px 2px 3px 0px rgba(50, 50, 50, 0.75); 
 
    -webkit-border-bottom-right-radius: 25px; 
 
    -webkit-border-bottom-left-radius: 25px; 
 
    -moz-border-radius-bottomright: 25px; 
 
    -moz-border-radius-bottomleft: 25px; 
 
    border-bottom-right-radius: 25px; 
 
    border-bottom-left-radius: 25px; 
 
} 
 
.primenu { 
 
    display: block margin: 0 auto; 
 
    width: 100%; 
 
} 
 
.primenu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.primenu li { 
 
    display: inline; 
 
    vertical-align: middle; 
 
} 
 
.primenu li:after { 
 
    content: "/"; 
 
    color: #ccc; 
 
    margin: 0 10px 0 10px; 
 
}

<div class="header"> 
 
    <div class="primenu"> 
 
    <ul> 
 
     <li><a href="default.asp">Home</a> 
 
     </li> 
 
     <li><a href="news.asp">News</a> 
 
     </li> 
 
     <li><a href="contact.asp">Contact</a> 
 
     </li> 
 
     <li><a href="about.asp">About</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

此代码显示：

为什么菜单没有中心althought我写余量： 0自动; ？

所以我想它显示：

如何解决呢？

如何删除：在上一个项目之后或添加：仅在第一个项目之前？

Answer 1

添加text-align: center到.primenu和使用.primenu li:not(:last-child):after选择添加/，如果你不想将它添加到最后一个元素。

此外，您不需要-webkit-和-moz-前缀border-radius和box-shadow。

.header { 
 
    height: 50px; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    box-shadow: 0px 2px 3px 0px rgba(50, 50, 50, 0.75); 
 
    border-bottom-right-radius: 25px; 
 
    border-bottom-left-radius: 25px; 
 
} 
 
.primenu { 
 
    display: block; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.primenu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.primenu li { 
 
    display: inline; 
 
    vertical-align: middle; 
 
} 
 
.primenu li:not(:last-child):after { 
 
    content: "/"; 
 
    color: #ccc; 
 
    margin: 0 10px 0 10px; 
 
}

<div class="header"> 
 
    <div class="primenu"> 
 
    <ul> 
 
     <li><a href="default.asp">Home</a> 
 
     </li> 
 
     <li><a href="news.asp">News</a> 
 
     </li> 
 
     <li><a href="contact.asp">Contact</a> 
 
     </li> 
 
     <li><a href="about.asp">About</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

使用text-align中心.header

.header{ 
 
    text-align:center; 
 
\t height:50px; 
 
\t width:50%; 
 
\t margin:0 auto; 
 
\t -webkit-box-shadow: 0px 2px 3px 0px rgba(50, 50, 50, 0.75); 
 
\t -moz-box-shadow: 0px 2px 3px 0px rgba(50, 50, 50, 0.75); 
 
\t box-shadow:   0px 2px 3px 0px rgba(50, 50, 50, 0.75); 
 
\t -webkit-border-bottom-right-radius: 25px; 
 
\t -webkit-border-bottom-left-radius: 25px; 
 
\t -moz-border-radius-bottomright: 25px; 
 
\t -moz-border-radius-bottomleft: 25px; 
 
\t border-bottom-right-radius: 25px; 
 
\t border-bottom-left-radius: 25px;} 
 
.primenu { 
 
\t display:block 
 
\t margin:0 auto; 
 
\t width:100%;} 
 
.primenu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.primenu li { 
 
    display: inline; 
 
\t vertical-align: middle; 
 
} 
 
.primenu li:after{ 
 
\t \t content:"/"; 
 
\t color:#ccc; 
 
\t margin: 0 10px 0 10px;}

<div class="header"> 
 
    <div class="primenu"> 
 
    \t <ul> 
 
    \t \t \t <li><a href="default.asp">Home</a></li> 
 
    \t \t \t <li><a href="news.asp">News</a></li> 
 
    \t \t \t <li><a href="contact.asp">Contact</a></li> 
 
    \t \t \t <li><a href="about.asp">About</a></li> 
 
\t \t </ul> 
 
    </div> 
 
</div>