css左右自适应布局

       如果有这么一个表单需求，前面是一个名称，中间是一个表单，右侧是一个按钮或者一个字符串。
需要自适应布局，名称为固定长度，右侧也是固定，中间部分自适应整个width。

先来看看html标签

1
2
3
4
5
6

<div>
	<label class="name">年龄</label>
	<input type="tel" placeholder="请输入您的年龄" class="input">
	<label class="unit">岁</label>
</div>

首先，我想到的有这么几种display，一个是inline-block。

于是css就变成这样

1

.name,.input,.unit{
       display:inline-block;
   }
   .name,.unit{
       width: 50px;
   }
   .input{
       width: 100%;
       margin: 0 -54px;
       overflow: hidden;
   }
   .input input{
       margin:0 54px;
       display:block;
   }

于是发现，input并不能自动撑开，即便给它加上了block。

再来试试float。

1

.name,.unit{
    width: 50px;
}
.name{
	float:left;
}
.unit{
	float:right;
}
.input{
    overflow: hidden;
}
.input input{
	width:100%;
}

发现还是不行，因为最后的一个.unit，会另起一行。
那就把html结构调整一下

1
2
3
4
5
6
7


<div>
	<label class="name">年龄</label>
	<label class="unit">岁</label>
	<input type="tel" placeholder="请输入您的年龄" class="input">
</div>

终于成功了，但是input的右侧边框被遮住了。
这个是因为input的width是100%，它的border和outline，把width撑开，其实这个时候的input的宽度为100%+4px。
你可以去掉边框，或者宽度设置百分之99，98等。

上面有个margin:0 -54px的css，因为inline-block会有元素间距的产生，具体的可以参考张鑫旭的博客关于inline-block元素间间距(张鑫旭)