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

前段时间需要做一系列移动站的水平布局表单，即 <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;
}

效果如下：

为了方便看效果，我给最外层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; 

}