李之间不需要的空间

Question

我试图通过向它们添加边框底部来分隔li项目。 但是，出现了不需要的空格：

Chrome告诉我没有填充/边距：

有谁知道这些空间的来源？

代码：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您看到像素舍入问题。

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

删除内联样式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 3

尝试将width:100%; float:left;应用于<LI>和/或<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>