html - 同一类的四个动态 的输出宽度不相同

Question

我创建了四个共享同一个类的动态 li。但是在输出中所有li的宽度都不一样。你可以简单地在你的浏览器中试试。

为什么会这样？如何纠正？

body {
  margin: 0;
  padding: 0;
}

.div-nav {
  width: 100%;
  background-color: #CC3399;
  overflow: hidden;
  padding: 0;
}

.ul-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.ul-nav li.space {
  background-color: black;
  width: 0.2%;
  height: 40px;
  margin-right: 20px;
  margin-left: 20px;
  float: left;
  padding: 0;
}

<div class="div-nav">
  <ul class="ul-nav">

    <li class="space"></li>
    <li class="space"></li>
    <li class="space"></li>
    <li class="space"></li>

  </ul>
</div>

Answer 1

我看到的最大问题是您将这些 li 的宽度指定为“0.2%”，这对我来说只是显示为黑色实线，即使其中包含内容。其次，您可能还指的是李之间的紫色比左边多。那是因为您将左右边距设置为 20px。这意味着最左边的 li 距离左边 20 px，距离下一个 li 右边 20px，它的左边有 20px 的边距。本质上，最左边的 li 左边有 20 像素，最右边有 20 像素的边距，它们之间有 40 像素 (20 + 20)。