为什么百分比填充会破坏我的弹性项目？

Question

我有 <ul> 元素，它是一个弹性项目。这个<ul> 元素包含几个不是弹性项目的<li> 元素。 当我将百分比填充添加到 <li> 元素时，<ul> 元素会像照片中那样分成几行：

当我设置固定填充（如 30px）时，<ul> 元素显示在一行中：

所以，我的问题是：为什么百分比填充会让<ul> 表现得这样？ P.S：我不需要解决方案来解决它，我只需要对行为的解释

li {
  display: inline-block;
  padding: 0 5%;
  /* padding: 0 30px; */
  border: 1px solid black;
}

header {
  display: flex;
}

ul {
  border:1px solid red;
}

<header>
  <ul>
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>

Answer 1

正如我在previous similar situation 中解释的那样，这里涉及到一种复杂的计算。与百分比值一起使用的填充将相对于包含块的宽度^ref，从逻辑上讲，包含块的宽度将由其内容（或任何固定宽度值）定义。

在我们的例子中，我们无法在计算宽度之前解析填充的百分比值，所以我们首先根据我们的内容计算宽度以获得这个：

console.log(document.querySelector('ul').offsetWidth);

li {
  display: inline-block;
  border: 1px solid black;
}

header {
  display: flex;
}

ul {
  border:1px solid red;
  margin:0;
  padding:0;
}

<header>
  <ul>
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>

然后我们将考虑上面计算的宽度以计算填充

之后，padding 将被逻辑地添加到宽度上，这将增加整体宽度并创建换行符。浏览器不会再回去重新计算ul的宽度，因为我们会有一个循环，所以只计算一次。

console.log(document.querySelector('ul.pad').offsetWidth);

li {
  display: inline-block;
  border: 1px solid black;
}
.pad li {
  padding:0 0.5%; /*any small value will create the issue*/
}

header {
  display: flex;
}

ul {
  border:1px solid red;
  margin:5px;
  padding:0;
}

<header>
  <ul>
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>
<header>
  <ul class="pad">
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>

我们可以清楚地注意到在这两种情况下ul 的宽度是完全相同的。

像素值不会发生这种情况，因为它们是浏览器可以在初始计算中包含的绝对值。

li {
  display: inline-block;
  border: 1px solid black;
}
.pad li{
  padding:0 30px; 
}

header {
  display: flex;
}

ul {
  border:1px solid red;
  margin:0;
  padding:0;
}

<header>
  <ul>
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>
<header>
  <ul class="pad">
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>