- 动态生成,每4个元素在每行平均分布
.box{
display: flex;
flex-wrap: wrap;
padding:30rpx;
}
.item{
margin-right: 16rpx;
margin-bottom: 16rpx;
width: calc((100% - 60rpx)/4);
line-height: 60rpx;
height: 60rpx;
text-align: center;
border-radius: 4rpx;
border: 2rpx solid #D8D8D8;
&:nth-child(4n) {
margin-right: 0
}
}
//每行最后元素显示短横线
//.box .item:not(:nth-child(4n)):not(:last-child):after
或者10个元素也要一行4个的时候,可以如下:
.box{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
2.固定几行几列,每4个元素在每行平均分布
.box{
display: grid;
grid-template-columns: repeat(4, 25%);
grid-template-rows: repeat(3, 150rpx);
}
3.点击元素显示底部短横线/右边短横线
.box{
position:relative;
}
.active-border:after {
position: absolute;
left: 45%;
bottom: -16rpx;
width: 36rpx;
height: 6rpx;
background: #044FA2;
content: '';
}
4.css3底部弧形
.box{
clip-path: ellipse(130px 140px at 50% 20%);
}
5.两行省略号
.line-clamp2{
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden ;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
6.水平垂直居中
.parent {
display: grid;
place-items: center;
}
7.必填红色星号
.required:before {
content: '* ';
color: red;
}
8.单行省略
verflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
9.多行省略
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;