为什么百分比填充会破坏我的弹性项目? [英] Why does percentage padding break my flex item?

问题描述

我有一个<ul>元素，它是一个flex项目.此<ul>元素包含多个<li>元素，它们不是flex项目. 当我向<li>元素中添加百分比填充时，然后<ul>元素会分成几行，如照片中所示:

I have <ul> element which is a flex items. This <ul> element contains several <li> elements which are not flex items. When I add percentage paddings to <li> elements then <ul> element is split in several lines like in the photo:

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

When I set fixed paddings (like 30px) the <ul> element is displayed in one line:

所以，我的问题是:为什么填充百分比使<ul>表现为这种方式? 附注:我不需要解决方案，只需要对行为进行解释

So, my question is: Why percentage paddings make <ul> behave this way? P.S: I don't need solutions to fix it, I just need an explanation of the behaviour

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>

推荐答案

正如我在

As I explained in a previous similar situation there is a kind of complex calculation involved here. Padding used with percentage value will be relative to the width of the containing block^ref and logically the width of the containing block will be defined by its content (or any fixed width value).

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

In our case, we cannot resolve percentage value of padding before calculating the width, so we first caclulate the width based on our content to obtain this:

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>

然后，我们将考虑上述计算出的宽度，以便计算出填充

Then we will consider the above calculated width in order to calculate the padding

此后，将在逻辑上将填充添加到宽度，这将增加整体宽度并创建换行符.浏览器不会再返回来重新计算ul的宽度，因为我们将有一个循环，因此计算仅执行一次.

After that, the padding will logically be added to the width which will increase the overall width and create the line break. The browser won't go back to re-caclulate the width of the ul again because we will have a cycle, so the calculation is done only once.

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的宽度在两种情况下是完全相同的.

We can clearly notice how in both case the width of the ul is exactly the same.

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

This won't happen with pixel values because they are absolute values that the browser can include in the initial calculation.

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>

这篇关于为什么百分比填充会破坏我的弹性项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！