CSS:使用内边距时,解决宽随之改变问题
一、效果图
1、未调整padding的效果
2、加入padding
发现加入padding之后宽被撑开了
3、解决问题后
加入box-sizing:border-box;属性值解决了该问题
二、代码
1、wxml
<view class="list_all flex flex-center">
<view class="list_item">
1
</view>
</view>
2、wxss
.list_all{
margin-top:10px;
width:100%;
}
.list_item{
width:90%;
padding:2%;
box-sizing:border-box;
background-color:white;
box-shadow: 2px 2px 2px rgb(0,0,0,0.1);
}
.flex{
display: flex;
}
.flex-center{
justify-content:center;
align-items: center;
}