使用％会引起换行，但是使用px可以正常工作

Question

  

li {       右填充：1％； }

以％设置会导致ul列表中出现换行符，但是当将其更改为px时似乎可以正常工作。

  

li {       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>

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>