-2

菜单中最后一个元素的末尾没有边框线。我无法修复它。能否请你帮忙？谢谢你的帮助。

 div.menu { 
    list-style:none; 
    margin:0; 
    padding:0; 
    width:100%;
    text-align:center;
    background:#FBB117;} 
 div.menu ul{ 
    font-family: Verdana; 
    font-size:14px;
    margin-left: auto;
    margin-right: auto; 
    margin-top: 3px;
    margin-bottom: 3px;
    width: 100px 
    padding:0;
    display:inline-block;} 
 div.menu li{ 
    display:inline; } 
 div.menu li a{ 
    text-decoration:none; 
    padding:7px 0; 
    width:100px; 
    background:#FBB117; 
    color:#4C4646; 
    float:left; 
    text-align:center; 
    border-left:1px solid #fff;}  
 div.menu li a:hover{ 
    background:#a2b3a1; 
    color:#000 }
4

2 回答 2

1 
    div.menu li{
          border-right: 1px solid #fff;
          display:inline-block;
        }    
    div.menu li:last-child{
          border-right: 1px solid #fff;
        }

将边框从链接中取出并放入 li

于 2012-04-17T18:20:21.893 回答
0

嗨，你可以像这样轻松地做到这一点

使用最后一个孩子并给 li 左边的边界

我的代码是

HTML

<div class="menu">
<ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="home.html">Home2</a></li>
    <li><a href="home.html">Home3</a></li>
    <li><a href="home.html">Home4</a></li>
    <li><a href="home.html">Home5</a></li>
    <li><a href="home.html">Home6</a></li>
</ul>
</div>​

CSS

div.menu { 
    list-style:none; 
    margin:0 auto; 
    padding:0; 
    width:70%;
    text-align:center;
    background:#FBB117;
    overflow:hidden;
} 
 div.menu ul{ 
    font-family: Verdana; 
    font-size:14px;
    margin:0 3px;
    width: 100%; 
    padding:0;

  } 
 div.menu li{ 
    margin:10px 0;  
    float:left; 
    border-left:1px solid #fff; 
} 
 div.menu li a{ 
    text-decoration:none; 
    line-height:29px;
    padding:0 10px;
    background:#FBB117; 
    color:#4C4646; 
    text-align:center;
display:inline-block; 


   }
div.menu li:last-child{
    border-right:solid 1px #fff;
}
 div.menu li a:hover{ 
    background:#a2b3a1; 
    color:#000 } 


​

现场演示http://jsfiddle.net/rohitazad/aJ5hc/

有关伪类的更多信息http://reference.sitepoint.com/css/css3psuedoclasses

于 2012-04-18T05:42:39.500 回答