Menü-Grenze

Gibt es keine Trennlinie am Ende des letzten element im Menü. Ich kann nicht reparieren. Könnten Sie bitte helfen? Vielen Dank für jede Hilfe.

 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 }

Bitte fügen Sie Ihren HTML-markup.
Haben Sie versucht, jsfiddle für die Festsetzung? jsfiddle.net
Sie sind nur mit Hilfe einer border-left. Wenn man sich an Sie Menü, und Sie sehen, dass die Dinge haben eine richtige Grenze, es ist eigentlich nur der linke Rand von dem nächsten element. Es gibt keine nächste element auf das Letzte Element.
Ja, aber ich weiß nicht, wie Sie eine Grenze für das Letzte element.

InformationsquelleAutor user1332075 | 2012-04-17

Hallo Sie können dies leicht tun wie diese

verwendet, letztes Kind, und geben li Rand Links

Mein code ist

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 }

Live-demo http://jsfiddle.net/rohitazad/aJ5hc/

mehr Infos über Pseudo-Klassen http://reference.sitepoint.com/css/css3psuedoclasses

Vielen Dank für die Antwort, aber die mneu ist nicht mehr zentriert und auch im Menü Linie dicker und ist nicht 100% Breite nicht mehr. Wie kann ich es beheben?

InformationsquelleAutor Rohit Azad

1
```
    div.menu li{
          border-right: 1px solid #fff;
          display:inline-block;
        }    
    div.menu li:last-child{
          border-right: 1px solid #fff;
        }
```
setzen der Grenze rechts der links und steckte es in die li
- Aber die Grenzen sind dünner als andere.
- ??? das ist die gleiche Breite, die Sie gegeben haben, zu jedem link im Menü.
- Ich kann nicht verstehen, was du meinst? Bitte überprüfen Sie jsfiddle.net/rATcP
- Zumindest wenn ich es öffne, FF11 ignoriert die :last-child und einfach gilt es, alle Elemente. Das schafft eine scheinbare 2px Grenze dazwischen-Elemente, weil es keinen Rand zwischen dem linken und rechten Grenzen der benachbarten li. Das erste und das Letzte sind richtig nur 1px - das ist, was er bedeutet, denke ich.
- bearbeitet. noch nicht darüber nachgedacht haben. jedes a ist das Letzte Kind des li. also das müssen die Grenzen über den li
- aber es funktioniert nicht jetzt.
- Ja tut es; er wollte sich einfach nicht ändern, seinen code richtig. Versuchen Sie, diese demo. Bedenken habe ich entfernt, die css-Datei für die div.menu element, reduzieren die visuelle Unordnung.
- sind Sie auf der dies ist die Antwort auf meine Frage?
InformationsquelleAutor Sven Bieder

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.