Nav-Menü blutet aus dem Behälter

Question

Morgen wieder ...,

Leider jeden zu stören, aber ich brauche mehr Hilfe ... Ich habe keine wirkliche Codierung im Alter getan, hier gehe ...

ich versuche, eine horizontale Navigationsmenü zu machen, hier ist mein html

<nav> 
<ul id="navmenu"> 
    <li><a href="" title="" class="selected">Link 1</a></li> 
    <li><a href="" title="">Link 2</a></li> 
    <li><a href="" title="">Link 3</a></li> 
    <li><a href="" title="">Link 4</a></li> 
    <li><a href="" title="">Link 5</a></li> 
<ul> 
<nav> 

jetzt habe ich die folgende CSS

/* menu */ 
ul#navmenu{ 
    border-top:1px solid #FFF; 
    background:#e60000; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    padding-left:30px; 
} 

ul#navmenu li{ 
    display:inline; 

} 

ul#navmenu li a{ 
    color:#fff; 
    text-decoration:none; 
    /* 
    padding-left:15px; 
    padding-right:15px; 
    */ 
    padding:15px 15px 15px 15px; 
} 

ul#navmenu li a.selected{ 
    color:#e60000; 
    text-decoration:none; 
    /* 
    padding-left:15px; 
    padding-right:15px; 
    */ 
    padding:15px 15px 15px 15px; 
    background:#fff; 
} 

möchte ich die Links in der Mitte des Li sitzen und in etwa so aussehen:

jedoch die enthaltende UL scheint nicht die LIs zu enthalten, sie aus dem Behälter bluten. Ich habe gespielt um mit Überlauf und Zeilenhöhen, aber nichts scheint ... ist Szenario ein Worst-Case hier zu arbeiten ...

hat jemand irgendwelche Ideen?

Answer 1

geben display: block auf Ihre <a> weil <a> in einem inline Element so nehmen inline Element nicht vertical margin, vertical padding, width & height

prüfen diese http://jsfiddle.net/T8eNe/2/

aber zuerst Ihre UL & NAV

schließen

Answer 2

Für den Anfang, ich würde d Schließen Sie die Tags <ul> und <nav> richtig, und überprüfen Sie, ob die übergeordneten Container nach links verschoben sind.

Answer 3

Geben inline-block zu Ihrem Anker

ul li a { display: inline-block; }