[英]CSS buttons align for all divs except the last one
I want to display all buttons aligned to fill full div width
, except for the last one.我想显示所有按钮对齐以填充整个 div
width
,除了最后一个。 My code is below, but the last div is short and is expanding full width, I don't want this for the last one.我的代码在下面,但最后一个 div 很短并且正在扩展全宽,我不希望在最后一个 div 中使用它。
NOTE: The buttons are dynamically generated.注意:按钮是动态生成的。
.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>
You can have separate classes for the short ones.您可以为简短的课程设置单独的课程。
.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>
You can use :last-child selector, it matches every element that is the last child of its parent.您可以使用 :last-child 选择器,它匹配作为其父元素的最后一个子元素的每个元素。
.button:last-child
Or you can also use nth-last-child(1) because nth-last-child(1) equal to last-child selector或者你也可以使用 nth-last-child(1) 因为 nth-last-child(1) 等于 last-child 选择器
.button:nth-last-child(1)
You can use last-child pseudo-class to target the last element only of you button class.您可以使用last-child伪类仅针对按钮类的最后一个元素。
.button:last-child {
max-width: max-content;
}
Working Example:工作示例:
.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; } .button:last-child { max-width: max-content; }
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.