gpt4 book ai didi

html - CSS 按钮与除最后一个 div 之外的所有 div 对齐

转载 作者:行者123 更新时间:2023-12-02 19:09:46 26 4
gpt4 key购买 nike

我想显示所有对齐以填充整个 div 宽度 的按钮,除了最后一个按钮。我的代码如下,但最后一个 div 很短并且正在扩展整个宽度,我不希望最后一个 div 是这样。

注意:按钮是动态生成的。

.block {
width: 400px;
display: flex;
flex-wrap: wrap;
}

.button {
background-color: #cec;
border: none;
color: white;
margin: 15px;
padding: 15px;
display: inline-block;
font-size: 16px;
flex: 1 0 auto;
}
<div class="block">
<div class="button"><a href="#">#1 - A LONG TEXT GOES HERE</a>
</div>
<div class="button"><a href="#">#2 - ANOTHER LONG TEXT HERE</a>
</div>
<div class="button"><a href="#">#3 - SOME TEXT HERE</a>
</div>
<div class="button"><a href="#">#4 - SHORT TEXT</a>
</div>
<div class="button"><a href="#">#5 - SHORT</a>
</div>
<div class="button"><a href="#">#6 - SHORT</a>
</div>
</div>

最佳答案

您可以为短期类(class)单独开设类(class)。

.block {
width: 400px;
display: flex;
flex-wrap: wrap;
}

.button {
background-color: #cec;
border: none;
color: white;
margin: 15px;
padding: 15px;
display: inline-block;
font-size: 16px;
flex: 1 0 auto;
}

.short {
max-width: 20vw;
}
<div class="block">
<div class="button"><a href="#">#1 - A LONG TEXT GOES HERE</a>
</div>
<div class="button"><a href="#">#2 - ANOTHER LONG TEXT HERE</a>
</div>
<div class="button"><a href="#">#3 - SOME TEXT HERE</a>
</div>
<div class="button"><a href="#">#4 - SHORT TEXT</a>
</div>
<div class="button short"><a href="#">#5 - SHORT</a>
</div>
<div class="button short"><a href="#">#6 - SHORT</a>
</div>
</div>

关于html - CSS 按钮与除最后一个 div 之外的所有 div 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64474455/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com