0

我创建了四个共享同一个类的动态 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>

4

3 回答 3

0

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

于 2012-10-01T07:14:36.233 回答
0

您需要向 ul 添加填充

.ul-nav{
    padding-left:20px;
}
于 2012-10-01T07:28:41.377 回答
0

那是因为浏览器如何计算并舍入到整个像素。0.2% 宽度意味着 ~3.35px 宽度。

（以下不是用中间的空格计算的，但它的工作原理是一样的）

  • 第一个 li 必须在 3.35px 标记处结束并四舍五入为 3px
  • 第二个 li 必须在 6.70px 标记处结束并四舍五入为 7px（相差 4px！）
  • 第三个 li 必须在 10.05 标记处结束并四舍五入为 10px（相差 3px）
  • 第四个 li 必须在 13.40 标记处结束并四舍五入为 13px（相差 3px）

如果你继续这个序列，甚至更多行，你会注意到每隔几行，数字就会向上取整。

纠正它的最佳方法是使用固定尺寸。比如 2px 或 3px。

于 2012-10-01T07:25:01.010 回答