我为我的应用程序构建了一个列表组件,由于样式,我无法使用表.
我希望“行”内的元素从上到下具有相同的宽度,如列.代码看起来类似于：
<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-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>
