使用 % 会导致换行，但使用 pc 工作正常[重复]答案

【问题标题】：Using % is casuing a line break but using px works fine [duplicate]使用 % 会导致换行，但使用 pc 工作正常[重复]
【发布时间】：2019-06-29 00:03:39
【问题描述】：

李{ 填充权：1％； }

在 % 中设置会导致 ul 列表中的换行符，但将其更改为 px 时似乎可以正常工作。

李{ padding-right: 5px; }

是什么导致了这个错误？小提琴link

ul,
li {
  float: right;
  display: inline-block;
  margin: 0;
  padding: 0;
}

li {
  padding-right: 1%;
}

<div class="navbar">
  <a href="">CMYK</a>
  <ul>
    <li>FAQ</li>
    <li>About</li>
    <li>Contact</li>
    <li>Home</li>
  </ul>
</div>

【问题讨论】：

百分比值是相对于父维度right,left concerns the width
显然 1% 的父级宽度不等于 5px
我不确定，使用 devtools 找出父项的 with 并计算 80px 是多少
重复的情况不一样，但是用百分比解释了相同的填充问题，因为浮动和弹性项目是收缩以适应元素
@ZohirSalak 任何百分比值，即使是 0.0001% 也会导致换行，因为它是百分比，它将在找到父元素的宽度（这是一个浮动元素）后计算出来。使用像素我们不会有任何问题，因为像素将被添加到父级的宽度。

标签： css

【解决方案1】：

% 总是相对于某些东西起作用。在您的情况下，如果您尝试为您的ul 提供宽度，您可以更清楚地理解它。假设你的ul 宽度是100px，那么li 的组合应该是100px，这意味着如果任何li 宽度超过25px，它将中断到下一行。请看下面的代码

ul {
  float: right;
  width: 50%;
  margin: 0;
  padding: 0;
}

li {
  padding-right: 10%;
  list-style: none;
  display: inline-block;
}

<div class="navbar">
  <a href="">CMYK</a>
  <ul>
    <li>FAQ</li>
    <li>About</li>
    <li>Contact</li>
    <li>Home</li>
  </ul>
</div>

【讨论】：