0

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

4

3 回答 3

2

看这个演示

添加了 CSS 样式

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

#menu_container ul li:last-child a{
    border: none;
}
于 2013-10-28T06:41:00.103 回答
0

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

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

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

于 2013-10-28T06:43:57.470 回答
0 
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-28T07:46:03.120 回答