右边自适应 左右布局_css左右自适应布局

如果有这么一个表单需求，前面是一个名称，中间是一个表单，右侧是一个按钮或者一个字符串。

需要自适应布局，名称为固定长度，右侧也是固定，中间部分自适应整个width。

先来看看html标签1

2

3

4

5

6<>

年龄

岁

>

首先，我想到的有这么几种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<>

年龄

岁

>

终于成功了，但是input的右侧边框被遮住了。

这个是因为input的width是100%，它的border和outline，把width撑开，其实这个时候的input的宽度为100%+4px。

你可以去掉边框，或者宽度设置百分之99，98等。

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