我已经为我的应用构建了一个列表组件,由于样式的原因我不能使用表格。
我想让“行”内的元素从上到下具有相同的宽度,就像列一样。代码看起来类似于:
<div class="row">
<div class"element>iPhone </div>
<div class"element>Buy an iPhone now!</div>
</div>
<div class="row">
<div class"element>Airport Express </div>
<div class"element>Buy an Airport Express now!</div>
</div>
<div class="row">
<div class"element>iPad </div>
<div class"element>Buy an iPad now!</div>
</div>
这是它目前的样子:
这就是我想要的:
有办法吗?
最佳答案
使用 CSS 表格:
- 行与
border-spacing
之间的分隔 - 单元格中的边框。您可以使用
border-radius
将它们四舍五入。 - 伪元素显示为单元格以填充右侧的可用空间
white-space: nowrap
以防止单元格因伪元素而缩小。
.wrapper {
display: table;
border-spacing: 0 10px;
}
.row {
display: table-row;
border: 1px solid;
}
.row::after {
content: '';
display: table-cell;
width: 100%;
border: 1px #6AACC9;
border-style: solid none;
}
.element {
display: table-cell;
border: 1px solid #6AACC9;
border-right-color: #adadad;
border-left-style: none;
padding: 5px;
white-space: nowrap;
}
.element:first-child {
border-left-style: solid;
border-radius: 5px 0 0 5px;
}
<div class="wrapper">
<div class="row">
<div class="element">iPhone </div>
<div class="element">Buy an iPhone now!</div>
</div>
<div class="row">
<div class="element">Airport Express </div>
<div class="element">Buy an Airport Express now!</div>
</div>
<div class="row">
<div class="element">iPad </div>
<div class="element">Buy an iPad now!</div>
</div>
</div>
关于CSS/Flexbox : Same width as largest element, 像列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36597913/