当前位置: 首页 > article >正文

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;
}


http://www.kler.cn/a/588054.html

相关文章:

  • C#通过API接口返回流式响应内容---SSE方式
  • rk3568 yt8521S phy设备层丢包定位处理
  • Smart Time Plus smarttimeplus-MySQLConnection SQL注入漏洞(CVE-2024-53544)
  • 链表题目2(leetcode24题)交换链表里面的节点
  • Flutter FloatingActionButton 从核心用法到高级定制
  • 从LLM出发:由浅入深探索AI开发的全流程与简单实践(全文3w字)
  • ElasticSearch组合查询及实际应用
  • python unity通讯数据解析2
  • WindowsPE文件格式入门01.PE头
  • [Windows] OfficeScrubber_13--office卸载清理工具
  • 【JavaEE】快速上手JSON:构建高效 Java 后端数据桥梁,开启交互新篇,以 @RequestBody 为引的探索之旅
  • 类和对象C++ (未完:对象特征)
  • linux - 基础IO之操作与文件描述符全解析:从C语言到系统调用底层实现
  • python爬虫Scrapy(5)之增量式
  • 生物角度分析
  • PHP语言的死锁
  • GBase8c 删除备机
  • 【Java 优选算法】分治 - 快速排序
  • 基于redis实现会话保持
  • Chat-Driven Business:灵活交互的新范式