使用display设置di​​v以自动适合其内容：inline-block - 意外空间

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

中添加<ul>

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

Answer 2

列表元素使用填充来增加缩进，因此请使用padding: 0

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>