Html 把一条线上的所有东西都填满

我正在与创建我的布局。我有一个容器，里面有标签和输入文本。标签有20%的宽度，然后是1米的边距，然后我想让容器中的剩余空间由inputfield填充，基本上应该是这样的

[标签宽度：20%][左边距：1米][此行的剩余空间应由inputfield填充]

我遇到的问题是，标签和边距都成功了。但是我必须给出80%的输入字段宽度，这样它会在行上，但是当调整大小时，它不会再次填充行

我做了一个快速的小提琴jsfiddle.net/Mg8cY/

---

当浏览器变小时，它会断开并变成两行，而当扩展浏览器时，它不会填满这一行。我试图在这里获得一个纯css解决方案。

单靠css无法完全满足您的要求，但有一些方法可以非常接近。首先，使用

框大小：边框框

，可以使标签从其自身的宽度中减去1em的间隙，使输入正好为宽度的80%：

.lbl {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
    width: 20%;
    display: inline-block;
    padding-right: 1em;
}
input[type=text],input[type=password] {
    width: 79%;
}

jsFiddle：

或者，您可以使用

display:table

和

display:table cell

来划分宽度。输入元素不尊重

display

的大多数值，但如果在输入周围添加额外的HTML标记，则可以实现这一点。还有必要在标签和输入之间添加一个额外的（空）标记以保持1em边距，因为表格单元格不能有边距，并且在其宽度中包含填充

<span class="lbl">mail</span>
<span></span>
<span><input type="text" placeholder="Email"></span>

.grid-75 p {
    display: table;
    width: 100%;
}
.grid-75 p span {
    display: table-cell;
}
input[type=text],input[type=password] {
    width: 100%;
}
.lbl {
    width: 20%;
}
.lbl + span{
    width: 1em; /* also needs the same font size as the label */
}

邮件
.grid-75 p{
显示：表格；
宽度：100%；
}
.格栅-75 p跨度{
显示：表格单元格；
}
输入[类型=文本]，输入[类型=密码]{
宽度：100%；
}
.lbl{
宽度：20%；
}
.lbl+span{
宽度：1em；/*还需要与标签相同的字体大小*/
}

---

jsiddle:

使用百分比边距，或者将输入宽度精确设置为80%，然后从标签的20%中减去边距，你能逃脱吗？