使用%设置li的padding-right导致ul列表换行，px却正常，原因何在？

这问题我碰到过好多次，核心原因其实是CSS中百分比内边距和固定像素内边距的计算逻辑完全不同，结合你的布局场景，具体拆解如下：

1. 百分比padding的“隐藏坑”：基于父容器宽度计算 #

CSS规范明确规定：元素的padding使用百分比值时，无论上下还是左右方向，都是基于包含块（通常是最近的块级父元素）的宽度来计算的。

在你的代码里：

• 整个导航容器是.navbar，它是块级元素，所以里面的ul和li的百分比值都会参考它的宽度。
• 你给li设置了padding-right:1%，这意味着每个li的右侧内边距是整个.navbar宽度的1%，四个li加起来就是4%的容器宽度。再加上每个li的文本宽度，很容易让ul的总宽度超过.navbar剩余的可用空间（毕竟左边还有一个CMYK链接占了一部分宽度）。
• 而ul本身是float:right的浮动元素，浮动元素的规则是：如果总宽度超出容器的可用宽度，就会自动换行到下一行——这就是你看到的换行问题。

2. 固定像素padding的稳定性：尺寸不随容器变化 #

当你换成padding-right:5px时，这个值是固定的，不会随容器宽度变化。四个li的总内边距只有20px，加上文本宽度的总尺寸大概率小于.navbar剩余的空间，所以ul能稳稳地和左边的链接在同一行显示，不会触发换行。

快速验证小技巧 #

你可以给各个元素加个边框直观观察：

.navbar { border:1px solid blue; }
ul { border:1px solid green; }
li { border:1px solid red; }

这样你就能清楚看到：用百分比padding时，ul的总宽度会随着.navbar宽度变化而波动，很容易触发行换行的阈值；而用px值时，ul的宽度是固定的，只要容器空间足够就不会换行。

内容的提问来源于stack exchange，提问作者CoDINGinDARK