菜單邊框線

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

來源

2012-04-17 user1332075

請添加HTML標記。 – paislee 2012-04-17 18:12:04

您是否嘗試用jsfiddle進行修復？ http://jsfiddle.net/ – Coffee 2012-04-17 18:12:39

你只使用左邊界。當你看着你的菜單，並且你發現事物有一個右邊界時，它實際上就是下一個元素的左邊框。最後一項沒有下一個元素。 – MetalFrog 2012-04-17 18:35:27

嗨，你可以很容易地做到這一點像這樣

使用最後一個孩子，並給李邊境離開

我的代碼是

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/

來源

2012-04-18 05:42:39

非常感謝您的回答，但機動性不再居中，菜單線更粗，不再是100％寬度。我該如何解決它？ – user1332075 2012-04-18 06:01:52

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

把邊框右出的鏈接，並把它放在李

來源

2012-04-17 18:20:21

但結束邊界比其他邊界更薄。 – user1332075 2012-04-17 18:21:59

???這與您爲菜單中的每個鏈接提供的寬度相同。 – 2012-04-17 18:23:26

我不明白你的意思？請檢查http://jsfiddle.net/rATcP/ – user1332075 2012-04-17 18:26:17

回答

相關問題