同じ幅のリストアイテムを整列する

Question

私はulタグを使って簡単なメニューバーを作ろうとしています。このタグには4つのリンクがあります。 ulの幅は画面幅の100％ですので、これに応じてliはすべて25％にする必要があります。

私はこれをやってみましたが、最後のリスト項目は次の行に落ちるだけです。 しかし、もし私が各liにwidth:23%を使用すると、それは良く見えます。 しかし、なぜこれが起きているのか非常に不思議で、なぜ25％で十分ではないのですか？

これは私のペンです：

http://codepen.io/anon/pen/XKryKW 私は任意の助けをいただければ幸いです！おかげさまで

Answer 1

シンプルです。あなたのhtmlにスペースがあります。これは常にインラインブロック要素に問題があります。それらを取り除くと結果のスペースがなくなります。この説明を参照してください：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

最初の：表示：インラインブロックは常にブロックの間に数ピクセルを残しますので、100％を超えることがあります。また、幅を作り、22pxのパディングを追加している：25％+ 22px + 22px（左と右）は、この使用を避けるために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

あなたはlisからpadding right and leftを削除する必要がある最初の事は、その後、あなたはそれが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>

間の間隔を無視させるために ulに font-size:0を追加することも必要