-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

こんにちはあなたはこのようにこれを簡単に行うことができます

最後の子を使用し、左の李ボーダーに与える

私のコードは

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 に答える