Ausrichtung Elemente mit der gleichen Breite ausrichten

Question

Ich versuche, eine einfache Menüleiste mit dem ul Tag, das 4 Links hat. Die ul Breite beträgt 100% der Bildschirmbreite, dementsprechend sollte jeder li 25% betragen.

Ich habe versucht, dies zu tun, aber das letzte Listenelement fällt nur auf die nächste Zeile .. Allerdings, wenn ich width:23% für jeden li verwenden würde, würde es gut aussehen. Aber ich bin sehr neugierig, warum das passiert, warum 25% nicht gut genug ist?

Das ist mein Stift:

http://codepen.io/anon/pen/XKryKW ich Hilfe schätzen würde! Danke.

Answer 1

Einfach. Sie haben Leerzeichen in Ihrem HTML. Dies ist immer ein Problem mit Inline-Blockelementen. Entferne sie und die Leerzeichen in deinem Ergebnis verschwinden. Sehen Sie diese Erklärung: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

http://codepen.io/ruchiccio/pen/YWKRVQ

<ul> 
    <li><a> first</a></li><li><a> second</a></li><li><a> third</a></li><li><a> fourth</a></li> 
</ul> 

Answer 2

Zuerst von: display: Inline-Block wird immer ein paar Pixel zwischen dem Block verlassen, so dass es immer mehr als 100% sein würde. Du fügst auch 22px padding, so dass die Breite: 25% + 22px + 22px (links und rechts), um diese Verwendung box-sizing: border-box;

li { 
    font-size:25px; 
    padding: 22px; 
    width:25%; 
    text-align:center; 
    float: left; 
    display: block; 
    box-sizing: border-box; 
}` 

https://jsfiddle.net/wietsedevries/kmzym3xL/

Answer 3

Das erste, was Sie padding right and left von lis entfernen müssen zu vermeiden, dann müssen Sie auch font-size:0 zu ul hinzufügen, um es zwischen lis

*{ 
 
    
 
    margin:0; 
 
    padding:0; 
 
    
 
    
 
} 
 
ul 
 
{ 
 
    
 
    height:70px; 
 
    background-color:#e1973d; 
 
    list-style-type:none; 
 
    width:100%; 
 
    font-size:0; 
 
} 
 
li 
 
{ 
 
font-size:25px; 
 
    padding: 22px 0; 
 
    width:25%; 
 
    text-align:center; 
 
    display:inline-block 
 
}

<ul> 
 
    <li><a> first</a> </li> 
 
<li><a> second</a> </li> 
 
    <li><a> third</a> </li> 
 
    <li><a> fourth</a> </li> 
 
</ul>

zu machen ignorieren Abstand