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

Question

我有一个<ul>元素，它是一个弹性项目。这个<ul>元素包含几个<li>不是弹性项目的元素。当我向<li>元素添加百分比填充时，元素<ul>被分成几行，如照片中所示：

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

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

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

正如我在之前的类似情况中所解释的，这里涉及一种复杂的计算。^{与百分比值一起使用的填充将相对于包含块引用}的宽度，并且逻辑上包含块的宽度将由其内容（或任何固定宽度值）定义。

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

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>

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

之后，填充将逻辑上添加到宽度，这将增加整体宽度并创建换行符。浏览器不会再回去重新计算宽度，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>