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

Question

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

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

所以，我的问题是：为什么填充百分比使<ul>表现得如此？ 附注：我不需要解决方案来解决它，我只需要对行为进行解释

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 ，并且在逻辑上，包含块的宽度将由其内容（或任何固定的宽度值）定义。 / p>

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

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; /*any small value will create the issue*/
}

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>