CSS-Padding ist übergelaufen Elternteil

Question

Ich versuche, eine horizontale Navbar zu machen, und ich habe es oben auf der Seite sitzen mit jedem der drei Listenelemente füllen ein Drittel des Raumes, alles gut daran Teil.

Das Problem ist, wenn ich versuche, das Anker-Tag (das innerhalb des Listenelements ist) den gesamten Platz des Listenelements aufzufüllen. Ich setze es auf display: block;, also nimmt es die volle Breite auf, aber ich kann es nicht bekommen, vertikalen Raum zu füllen, wie ich es will. Ich kann height: 100% verwenden und es füllt den Raum, aber wenn ich es so mache, bleibt der Text des Anchor-Tags oben im Listenfeld, aber ich möchte, dass es vertikal zentriert ist. Dafür kam mir die obere und untere Polsterung in den Sinn, also habe ich versucht, padding: 100%; einzustellen. Als das passierte, konnte ich den Text des Anchor-Tags nicht mehr sehen. Wenn Sie das Feld mit der Maus ziehen, sieht es so aus, als würde das Tag mehr Platz einnehmen als im Listenelement.

Dies ist ein Bild der Navigationsleiste mit height: 100%;: Anmerkung: Die roten Linien jeden Abschnitt die Grenzen sind umgeben, die ich sichtbar gesetzt

Der entsprechende HTML-Code Grenzen anzuzeigen, wie folgt:

<ul class="main_nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Test page</a></li> 
    <li><a href="#">Test page 2</a></li> 
</ul> 

Der entsprechende CSS-Code ist wie folgt:

body * { 
    font-family: Roboto sans-serif; 

    box-sizing: border-box; 

    border: solid 2px red; 
} 

header ul.main_nav { 
    background-color: gray; 
    color: #EBEBEB; 

    margin: 0px; 

    padding: 0px; 

    width: 100%; 
    height: 50px; 

    list-style-type: none; 
    list-style-position: inside; 

    overflow: hidden; 
} 

header ul.main_nav li { 
    text-align: center; 

    float: left; 

    width: calc(100%/3); 
    height: 100%; 
} 

header ul.main_nav li a { 
    display: block; 

    height: 100%; 

    text-decoration: none; 
} 

EDIT: Ich würde lieber nicht feste Größen verwenden, um dies zu lösen, da ich weitgehend einen einzelnen Wert (50px für die ul) in der Lage lieber zu bearbeiten, um die ganze navbar

anpassen

Answer 1

Sie diese Flexbox mit tun kann ,

*, 
 
*:before, 
 
*::after { 
 
    box-sizing: border-box; 
 
} 
 
body * { 
 
    font-family: Roboto sans-serif; 
 
    border: solid 2px red; 
 
} 
 
ul.main_nav { 
 
    background-color: gray; 
 
    color: #EBEBEB; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    list-style-position: inside; 
 
    display: flex 
 
} 
 
ul.main_nav li { 
 
    flex: 1; 
 
    display: flex; 
 
    height:100%; 
 
} 
 
ul.main_nav li a { 
 
flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background: yellow 
 
}

<ul class="main_nav"> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Test page</a> 
 
    </li> 
 
    <li><a href="#">Test page 2</a> 
 
    </li> 
 
</ul>

wenn du gehst in Ihrem Menü nur eine Zeile haben, können yo line-height verwenden, siehe unten

*, 
 
*:before, 
 
*::after { 
 
    box-sizing: border-box; 
 
} 
 
body * { 
 
    font-family: Roboto sans-serif; 
 
    border: solid 2px red; 
 
} 
 
ul.main_nav { 
 
    background-color: gray; 
 
    color: #EBEBEB; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    list-style-position: inside; 
 
    overflow: hidden; 
 
    font-size: 0; 
 
} 
 
ul.main_nav li { 
 
    text-align: center; 
 
    width: calc(100%/3); 
 
    height: 100%; 
 
    display: inline-block; 
 
    font-size: 16px 
 
} 
 
ul.main_nav li a { 
 
    display: block; 
 
    height: inherit; 
 
    background: yellow; 
 
    text-decoration: none; 
 
    line-height: 32px /*this should be the same value has the parent height*/ 
 
}

<ul class="main_nav"> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Test page</a> 
 
    </li> 
 
    <li><a href="#">Test page 2</a> 
 
    </li> 
 
</ul>