有没有办法在 Flexbox 中将 padding-left 和 padding-right 设置为元素宽度的 10%。
我尝试使用 padding: 0 10%;，但它不是元素宽度的 10%。
.flex {
display: flex;
}
.item1 {
padding: 0 3px;
/*calculated depending on text width*/
}
.item2 {
padding: 0 16px;
/*calculated depending on text width*/
}
.item3 {
padding: 0 34px;
/*calculated depending on text width*/
}
/*can it be done with one rule for items*/
.item {
/*padding: 0 (width/10); something like this*/
}<div class="flex">
<div class="item1">itm1</div>
<div class="item2">item2 with greater width</div>
<div class="item3">item3 with the greatest width ....................................</div>
</div>编辑:我用 javascript 解决了它，但不使用 js 也能解决吗？ 我只想将填充设置为文本宽度的某个百分比。
(() => {
const items = document.getElementsByClassName('item');
for (let item of items) {
item.style.padding = `0 ${item.offsetWidth / 10}px`;
}
})();.flex {
display: flex;
}
.item {
border: 2px solid red;
white-space: nowrap;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex">
<div class="item">itm1</div>
<div class="item">item2 with greater width</div>
<div class="item">item3 with the greatest width ....................................</div>
</div>
</body>
</html>最佳答案
这是一个只适用于 Chrome 的奇思妙想。由于百分比填充会创建一个循环，因此使用动画将强制再次重新计算宽度:
.item {
display:table; /* OR inline-table if you want the element to be inline */
border:1px solid;
}
.item:before,
.item:after{
content:"";
display:table-cell;
padding:0 5%;
width:0;
animation:fix 5s linear infinite;
}
@keyframes fix {
to {
width:0.1px;
}
}<div class="item">itm1</div>
<div class="item">item2 with greater width</div>
<div class="item">item3 with the greatest width ....................................</div>了解与百分比填充相关的问题的相关问题:
关于html - 将 padding-left 和 padding-right 设置为元素宽度的 10%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59102226/