我有一个弹性项目
当我设置固定的 padding(如30px)时,
所以,我的问题是:为什么百分比的 padding 会导致
<ul>
元素。这个 <ul>
包含几个不是弹性项目的 <li>
元素。
当我给 <li>
元素添加百分比的 padding 时,<ul>
元素就会像图片中那样分成几行:
![enter image description here](https://istack.dev59.com/G5LbY.webp)
<ul>
元素在一行中显示:
![enter image description here](https://istack.dev59.com/MNhOP.webp)
<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>