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

前端父元素flex布局设置左右padding时,input溢出父元素右内边距无效

无效情况

<div class="flex items-center bg-[#fff] w-[240px] h-[44px] px-[16px]"><div class="whitespace-nowrap text-[#161616] ">姓名:</div><input type="text" placeholder="请输入您的称呼">
</div>

解决问题,input元素添加宽度

<div class="flex items-center bg-[#fff] w-[240px] h-[44px] px-[16px]"><div class="whitespace-nowrap text-[#161616] ">姓名:</div><!--    !!添加宽度 w-full=width: 100% 使用了tailwindcss   --><input class="w-full" type="text" placeholder="请输入您的称呼">
</div>
http://www.dtcms.com/a/207118.html

相关文章:

  • 我的世界模组开发——物理学(1)
  • VPLC (VPLCnext) K8S
  • YOLO学习笔记 | YOLO11对象检测,实例分割,姿态评估的TensorRT部署c++
  • 企业网站架构部署与优化第4章Nginx核心功能
  • C++ HTTP框架推荐
  • AI|Java开发 IntelliJ IDEA中接入本地部署的deepseek方法
  • docker-安装部署于macOS11
  • 防震基座在半导体晶圆制造设备抛光机详细应用案例-江苏泊苏系统集成有限公司
  • 【HALCON 】深入理解 gray_histo_abs 灰度直方图算子
  • 动态网页爬取:Python如何获取JS加载的数据?
  • docker多阶段构建镜像
  • C++中的菱形继承问题
  • Go语言gopacket库的HTTP协议分析工具实现
  • Springboot3
  • 【数据结构】链式二叉树
  • WebSphere Application Server(WAS)8.5.5教程第十讲
  • appstore 管理后台,如何更改已有的预览和截屏
  • 26-RTOS的基本介绍
  • 【 开源:跨平台网络数据传输的万能工具libcurl】
  • Bert预训练任务-MLM/NSP
  • Python打卡训练营day29-类的装饰器
  • 并发编程实战--对象的共享
  • 基于机器学习的策略开发和Backtrader回测
  • JAVA SE — 循环与分支和输入输出
  • VS Code + Maven 创建项目
  • JDK8中的 Stream流式编程用法优化(工具类在文章最后)
  • 【记录】PPT|PPT打开开发工具并支持Quicker VBA运行
  • C++初阶-list的使用1
  • Ubuntu 通过指令远程命令行配置WiFi连接
  • GuzzleHttp和DomCrawler的具体用途?