將div設置爲使用display自動調整它的內容：inline-block - unexpected space

Question

我使用display: inline-block使div自動展開以適應其內容。然而，似乎是在div意想不到的綠色空間（用一個箭頭指向它）：

爲了改善這種情況，我嘗試添加margin: 0;到li元素，但是問題仍然發生。

ul { 
 
list-style: none; 
 
margin: 0px; 
 
} 
 
li { 
 
width:100px; 
 
float: left; 
 
background: red; 
 
margin: 0; 
 
}

<div style="background: green; display: inline-block;"> 
 
<ul> 
 
<li>Example</li> 
 
<li>Example</li> 
 
<li>Example</li> 
 
</ul> 
 
</div>

的jsfiddle：https://jsfiddle.net/8xz0sze6/

Answer 1

默認情況下<ul>標籤從左至右具有填充，在這裏您已經定義綠色背景外的div所以它的表現空間，因爲在<ul>默認填充

加padding:0px in <ul>

個

ul { 
list-style: none; 
margin: 0px; 
padding:0px; 
} 

Answer 2

列表元素使用填充，以增加縮進所以使用padding: 0

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
li { 
 
    width: 100px; 
 
    float: left; 
 
    background: red; 
 
    margin: 0; 
 
}

<div style="background: green; display: inline-block;"> 
 
    <ul> 
 
    <li>Example</li> 
 
    <li>Example</li> 
 
    <li>Example</li> 
 
    </ul> 
 
</div>

Answer 3

<ul>採取填充在左側默認重置和每一件事情都會好起來的

ul { 
 
list-style: none; 
 
margin: 0px; 
 
    padding: 0; 
 
} 
 
li { 
 
width:100px; 
 
float: left; 
 
background: red; 
 
margin: 0; 
 
}

<div style="background: green; display: inline-block;"> 
 
<ul> 
 
<li>Example</li> 
 
<li>Example</li> 
 
<li>Example</li> 
 
</ul> 
 
</div>