解决css中flex布局的元素有padding情况下各弹性元素width出现的问题

问题描述如下：

1.正常情况下：

在做一个app头部搜索的时候用了flex布局。左右图标宽度固定，中间搜索框用了设置flex为1,没设置padding的时候如下图所示：

2.给中间input设置padding后input块的宽度占用了后面购物车的宽度

3.解决问题(box-sizing:border-box)

　　百度了一下算是找到了解决方案：给设置padding的input添加box-sizing:border-box,就ok了

代码大致如下：

html

<header>
    <a href="" class="chat"></a>
    <div class="search">
        <input type="text" placeholder="简约白搭欧美大牌短靴">
    </div>
    <a href="" class="cart"></a>
</header>

css

header{
  display: flex;
  flex-flow: row;
  background-color: #fff;
  height:2rem;
}
header .chat{
  background: url(images/chat.png) no-repeat center;
}
header .search{
  flex:1;
}
header .search input{
  width: 100%;
  height: 100%;
  background: #eee url(images/search.png) no-repeat 10px center;
  background-size: 1rem 1rem;
  border:0;
  border-radius:3px;
  padding-left: 1.5rem;
  box-sizing:border-box;
}
header .cart{
  background: url(images/cart.png) no-repeat center;

}
header .chat,header .cart{
  width: 4rem;
  background-size: 2rem auto;
}

box-sizing:border-box 就是为了设置width和height元素值包含padding(内边距)和border(边框)的值，这样就很好的解决了padding使宽度溢出的问题

优质内容筛选与推荐>>
1、MySQL服务无法启动（2003 - Can't connect to MySQL server on‘localhost' (10061).）
2、iOS学习35数据处理之文件读写
3、关于网络NSURLSession
4、Docker学习笔记05_部署nginx+php+mysql+phpmyadmin
5、servlet获取多个同名参数

0 │ 收藏 │ 举报

朋友将在看一看看到

分享想法到看一看