css - 使用 % 会导致换行，但使用 px 可以正常工作

Question

li { padding-right: 1%; }

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

li { padding-right: 5px; }

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

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>

Answer 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>