Html 在输出宽度中为四个动态<；李>；同班同学不一样

我创建了四个动态li，它们共享同一个类。但在输出中，所有li的宽度都不相同。您只需在浏览器中尝试即可

为什么会这样？如何纠正

正文{
保证金：0；
填充：0；
}
.分区导航{
宽度：100%；
背景色：#CC3399；
溢出：隐藏；
填充：0；
}
.ul导航{
列表样式：无；
保证金：0；
填充：0；
宽度：100%；
}
.ul nav li.space{
背景色：黑色；
宽度：0.2%；
高度：40px；
右边距：20px；
左边距：20px；
浮动：左；
填充：0；
}

我看到的最大问题是，您将这些li的宽度指定为“0.2%”，这对我来说只是显示为一条黑色实线，即使其中包含内容。 第二，你可能还提到了这样一个事实，李氏之间的紫色比左边的紫色多。这是因为左右边距设置为20px。这意味着最左边的li距离左边20 px，距离左边有20 px边距的下一个li的右边20 px。

---

基本上，最左边的li左边是20像素，最右边是20像素，它们之间是40像素（20+20）。

这是因为浏览器是如何计算并四舍五入到整像素的。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。

您需要在ul中添加填充

.ul-nav{
    padding-left:20px;
}

---

先生，我在问为什么这些线（0.2%

）的宽度不同。忽略页边距。由于这些是在%ge中，您可以检查在更改浏览器宽度时是否有一两条随机线消失。这可能只是一个渲染问题。。。没有哪个半智能的浏览器会期望一个元素具有如此奇怪、微小的宽度。为什么不创建一个宽度为1或2像素的边框？？对0.2%的用途很好奇……我知道我可以使用border，但它还有其他用途，我需要通过这条路。我应该怎么做（除了边界）才能使这个百分比问题很好地工作？你正在采取的方法将是不可预测的，而且会有故障，就像你正在发现的那样。为了避免您遇到的问题，您需要形成一种不同的方法。0.2%仅仅是一个微不足道的数字，它将太多的决策权留给了浏览器。即使使用1或2像素的设定宽度，也会产生相同的功能，但看起来更好，而且100%更可预测。谢谢mike的提示。你能给我提供一个链接，让我知道浏览器是如何近似宽度的，以及为什么上面编码中的宽度在同一级别的li中是不同的？提前感谢，我在问为什么这些线（0.2%

）的宽度不一样。忽略页边距。由于这些是在%ge中，您可以检查更改浏览器宽度时是否有一两条随机线消失。我不知道为什么浏览器会这样对待百分比，您可以使用像素而不是百分比（如果可以的话）。：）实际上，我在做一个响应性很强的网页设计，我需要考虑它的百分比，也就是说，我没有使用像素。先生，我想你明白我的意思了。但是我不明白浏览器是如何调整宽度的。你能解释更多吗？或者你能给我一个有用的链接吗？u先生说第二个李必须以4px的差值结束，这意味着它必须比所有李都宽，但这里的情况完全相反，它是所有李中最薄的。虽然我喜欢你的逻辑，但我觉得它并不完全准确。如果你说的是凌晨2点，那么是的，你会在3点2分左右。百分比相对于浏览器/父级宽度，在应用程序中不可预测。实际上，我们说的是0.2%，在一个1024px宽的浏览器窗口上，相当于2.05px（但同样，它都是相对于父级的）。如果所有li都有相同的父级，那么为什么少数li的宽度与另一个不同？当然，这取决于屏幕的宽度或父级。数学本身可能不同，但逻辑是一样的。这一切都和向上或向下取整整像素有关。