利用overflow:hidden属性自动充满父级剩余宽度实现自适应

来源：互联网发布：openstack windows 编辑：程序博客网时间：2024/06/16 19:26

前段时间需要做一系列移动站的水平布局表单，即 <label> 和 <input> 在同一行内, 并且要做到自适应占满全屏，第一次使用 overflow:hidden 属性来实现在 <label> 标签定宽的情况下，右部输入框部分自适应铺满剩余空间。HTML代码如下：

<div class="clearfix input-row">  <label>企业名称：</label>  <div class="input_wrapper">    <input type="text" required />  </div></div>

CSS:

.input-row{  background:lightskyblue;}.input-row label{    float: left;    display: inline-block;    width: 66px;    line-height: 30px;    text-align: right;    margin-right: 5px;}.input_wrapper{  overflow: hidden;  margin-bottom: 8px;}.input_wrapper input{  box-sizing: border-box;  border: 1px solid #dfdfdf;  width: 100%;  height: 30px;  outline: medium;}

效果如下：
pic_01

为了方便看效果，我给最外层DIV加了背景色，然后给内部包裹input元素的div加了margin-bottom：8px 来看出父级div的宽度。label是定宽，

在左边label元素设置了左浮动的前提下，右部包裹input的div设置了overflow：hidden属性，自适应填充剩余宽度，input设置宽度100%填满此div。

另一种情况是input框左右两边都有字的情况下：
这里写图片描述

只是多了一个包含右部文字行内元素右浮动，注意此行内元素代码必须在input_wrapper div元素之前。

<div class="clearfix input-row">  <label>注册资金：</label>  <span>万元</span>  <div class="input_wrapper">    <input type="text" required />  </div></div>

css:

 
span{ 
  float:left; 
  line-height: 30px; 
  margin-left: 5px; 
}

0 0