如何修复此CSS并将菜单水平居中？

Question

我正在尝试删除“联系我们”链接右侧菜单中的垂直线，然后将整个菜单栏居中。 这是代码（JSFiddle链接在底部）。 提前感谢你的帮助 ：）

HTML：

<body>

<div id="page_wrapper">
<div class="page_padding">

<div id="header">
<div class="inner_padding">

</div>
</div>

<div id="menu_container">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Registration</a></li>
  <li><a href="#">User Programs</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Calendar</a></li>
  <li><a href="#">FAQ</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>
<div class="spacer"></div>
</div>

</body>

CSS：

body{
     margin:15px 0 15px 0;
     padding:0;
     line-height: 1.7em;
     text-align: center;
     font-family: verdana, arial, sans-serif;
     font-size: 75%;     
}


#page_wrapper {
     width: 890px;
     border:1px solid #8A837D;
     background-color: #FFFFFF;
     margin: 0 auto;
     padding:0;
     text-align: left;
}

#header {
     background: #999E8A url('../img/#.jpg') top right no-repeat;
     height: 135px;
     padding-top:25px;
     margin:0;
}


#content_wrapper {
     float: left;
     width: 100%;
}

.inner_padding {
     margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
}

.page_padding {
     margin: 15px; /*Margins for inner DIV inside each column (to provide padding)*/
}


#menu_container {
     margin:0;
     padding: 0;
}

#menu_container ul {
     padding-left: 0;
     margin: 0;
     background-color: #CC6600;
     color: White;
     float: left;
     width: 100%;
     font-family: verdana, arial, helvetica, sans-serif;
     font-size: 1.2em;
     font-weight: bold;
}

#menu_container ul li { display: inline; line-height: 1em;}

#menu_container ul li a {
     padding: 1em 1em 1em 1em;
     background-color: #CC6600;
     color: White;
     text-decoration: none;
     float: left;
     border-right: 1px solid #fff;
}

#menu_container ul li a:hover {
     background-color: #FF9933;
     color: #fff;
}

 .spacer {clear:both;}

>>>>请参阅JSFiddle上面的例子

Answer 1

看这个演示

添加了CSS样式

#menu_container {
    margin:0;
    padding: 0;
    padding: 0 20px;
    background: #CC6600;
}

#menu_container ul li:last-child a{
    border: none;
}

Answer 2

您可以使用<ul>上的CSS规则display: table和<li>上的display: table-cell 。 这将使菜单完美地适合水平空间。 我删除了display: inline并添加了display: block到<a>标签。

要删除边框，可以使用:first-child或:last-child CSS选择器。 我建议使用：first-child，然后将边框放在<a>的左边。 这只是因为：更多浏览器支持first-child。

这是一个小提琴： http ： //jsfiddle.net/davidpauljunior/94PsT/2/

Answer 3

edit css like this

演示： http ： //jsfiddle.net/94PsT/4/

  #menu_container ul {
padding-left: 0;
margin: 0 auto;
background-color: #CC6600;
color: White;
width:92%;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
 }

#menu_container ul li:last-child a {
padding: 1em 1em 1em 1em;
background-color: #CC6600;
color: White;
text-decoration: none;
float: left;
border-right: none;
 }