li 之间不需要的空格

Question

我正在尝试通过向它们添加边框底部来分隔 li-items。但是，出现了不需要的空格：

Chrome 告诉我没有 padding/margin:

有人知道这些空间是从哪里来的吗？

代码：

<ul style="list-style-type: none; padding: 0;">
  <% 15.times do |whatever| %>
    <li style="border-bottom: 1px solid red;">
       <div style="width: 100%; height: 50px; background-color: green; display: block; ">
      </div>
    </li>
  <% end %>
</ul>

Answer 1

删除内联样式的高度 div

<ul style="list-style-type: none; padding: 0;">
  <% 15.times do |whatever| %>
    <li style="border-bottom: 1px solid red;">
       <div style="width: 100%; background-color: green; display: block; ">
      </div>
    </li>
  <% end %>
</ul>

Answer 2

尝试将 width:100%; float:left; 应用于 <LI> and/or <div>

我在这里添加一个示例。请查收。

ul li{
        border-bottom: 1px solid red;
        margin: 0;
        list-style: none;
    }
    ul li div{
        width: 100%; 
        height: 40px;
        background-color: green; 
        display: block;
    }

<ul>
    <li>
       <div>
      </div>
    </li>
    <li>
       <div>
      </div>
    </li>
    <li>
       <div>
      </div>
    </li>
    <li>
       <div>
      </div>
    </li>
</ul>

Answer 3

您发现像素舍入有问题。

您可以将边框添加到 div，这似乎允许在没有伪影的情况下进行缩放。

li div {
  border-bottom: 1px solid red;
}

<ul style="list-style-type: none; padding: 0;">
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
  <li>
    <div style="width: 100%; height: 50px; background-color: green; display: block; ">
    </div>
  </li>
</ul>

li 之间不需要的空格

Unwanted spaces between li

html

css

space

html-lists