如何解決這個CSS和居中菜單水平？

我試圖刪除菜單中的「聯繫我們」鏈接右側的垂直線，然後居中整個菜單欄。這裏是代碼（JSFiddle鏈接在底部）。在此先感謝您的幫助:)如何解決這個CSS和居中菜單水平？

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

來源

2013-10-28 Scott James

您可以在<li>上的<ul>和display: table-cell上使用CSS規則display: table。這將導致菜單完全適合水平空間。我刪除了display: inline並將display: block添加到了<a>標籤。

要刪除邊框，可以使用:first-child或:last-child CSS選擇器。我建議使用：第一個孩子，然後將邊框放在<a>的左側。這是因爲：第一個孩子在更多的瀏覽器中被支持。

這裏有一個小提琴：http://jsfiddle.net/davidpauljunior/94PsT/2/

來源

2013-10-28 06:43:57 davidpauljunior

我感謝所有幫助的答覆。我發現你是最優雅和適用的解決方案。謝謝！ –

see this demo

CSS樣式添加

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

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

來源

2013-10-28 06:41:00

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; 
}

來源

2013-10-28 07:46:03 radha

如何解決這個CSS和居中菜單水平？

回答

相關問題