我正在尝试制作一排按钮,其中按钮的大小相同,但尽可能小 - 因此每个按钮的大小都与最大的按钮相同。
我该怎么做?
div {
border: solid 1px black;
margin: 5px;
padding: 5px;
background-color: #fff;
}
.container {
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
}
.item {
background-color: #eef;
flex: 0 1 auto;
white-space: nowrap;
}
<div class="container">
<div class="item">this one is quite long</div>
<div class="item">short</div>
</div>
最佳答案
flexbox
可以做很多但不是全部。对于这个 grid
会很好,但由于它缺乏良好的浏览器支持,它的旧“版本”table
可能是一个选项。
这是一个无脚本的动态解决方案,使用display: inline-table
。
.container,
.item {
border: solid 1px black;
margin: 5px;
padding: 5px 0 5px 5px;
background-color: #fff;
}
.container {
text-align: right;
}
.wrap {
display: inline-table;
border-spacing: 10px 5px;
}
.item {
background-color: #eef;
display: table-cell;
width: 50%;
white-space: nowrap;
text-align: left;
}
<div class="container">
<div class="wrap">
<div class="item">this one is quite long</div>
<div class="item">shorter</div>
</div>
</div>
关于html - 如何使 flex 元素缩小到最小的合适尺寸,但尺寸相同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40924082/