CSS:使用内边距时,解决宽随之改变问题

一、效果图

1、未调整padding的效果

2、加入padding

发现加入padding之后宽被撑开了

3、解决问题后

加入**box-sizing:border-box;**属性值解决了该问题

二、代码

1、wxml

html 复制代码
<view class="list_all flex flex-center">
  <view class="list_item">
    1
  </view>
</view>

2、wxss

css 复制代码
.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;
}
相关推荐
盛夏绽放1 小时前
jQuery 知识点复习总览
前端·javascript·jquery
胡gh3 小时前
依旧性能优化,如何在浅比较上做文章,memo 满天飞,谁在裸奔?
前端·react.js·面试
大怪v3 小时前
超赞👍!优秀前端佬的电子布洛芬技术网站!
前端·javascript·vue.js
胡gh3 小时前
你一般用哪些状态管理库?别担心,Zustand和Redux就能说个10分钟
前端·面试·node.js
roamingcode5 小时前
Claude Code NPM 包发布命令
前端·npm·node.js·claude·自定义指令·claude code
码哥DFS5 小时前
NPM模块化总结
前端·javascript
灵感__idea5 小时前
JavaScript高级程序设计(第5版):代码整洁之道
前端·javascript·程序员
唐璜Taro6 小时前
electron进程间通信-IPC通信注册机制
前端·javascript·electron
陪我一起学编程7 小时前
创建Vue项目的不同方式及项目规范化配置
前端·javascript·vue.js·git·elementui·axios·企业规范
LinXunFeng7 小时前
Flutter - 详情页初始锚点与优化
前端·flutter·开源