如何修复此 CSS 并使菜单水平居中？答案

【问题标题】：How to Fix this CSS and Center the Menu Horizontally?如何修复此 CSS 并使菜单水平居中？
【发布时间】：2013-11-06 20:18:40
【问题描述】：

我正在尝试删除菜单中“联系我们”链接右侧的垂直线，然后将整个菜单栏居中。这是代码（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;}

>>>> See example of above on JSFiddle

【问题讨论】：

标签： css list html-lists centering navbar

【解决方案1】：

see this demo

添加了css样式

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

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

【讨论】：

【解决方案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/

【讨论】：

感谢所有有用的回复。我发现您的解决方案是最优雅和适用的解决方案。谢谢！

【解决方案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;
 }

【讨论】：