对齐中心CSS和After 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> 

此代码显示：

为什么菜单不居中，但我却写了：0自动； ？

所以我要显示：

如何解决？

如何在最后一项中删除：after或仅在第一项之前添加：before？

Answer 1

在.header上使用text-align中心

 .header{ text-align:center; 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> 

Answer 2

将text-align: center添加到.primenu并使用.primenu li:not(:last-child):after selector .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>