對齊具有相同寬度的列表項目

Question

我正在嘗試使用具有4個鏈接的ul標記來製作簡單的菜單欄。 ul寬度是屏幕寬度的100％，所以根據這個每li應該是25％。

我試過這樣做，但最後的列表項只是落到下一行.. 但是，如果我將使用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

第一個：display：inline-block會在塊之間留下幾個像素，所以它總是會超過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第一件事，那麼你還需要添加font-size:0到ul，使其忽略間距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>