html - 填满 1 行上的所有内容

Question

我正在使用 unsemantic grid创建我的布局。好吧，我有一个容器，其中有一个标签和一个输入文本。标签的宽度为 20% 然后 margin-rightof 1em 然后我想让容器中的其余空间由输入字段填充，基本上应该是这样的

[LABEL width: 20%] [margin-left:1em] [Remaining space on this line should be filled by the inputfield]

我遇到的问题是，label 和 margin 都成功了。但我必须将输入字段的宽度设置为 80%，这样它才会在线，但在调整大小时不会再次填满该行。

我制作了一个快速的 fiddle jsfiddle.net/Mg8cY/

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

Answer 1

仅靠 CSS 无法完全满足您的要求，但有一些方法可以非常接近。首先，使用 box-sizing: border-box，可以使标签从其自身的宽度中减去 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:http://jsfiddle.net/Mg8cY/2/

或者，您可以使用 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 */
}

jsFiddle:http://jsfiddle.net/Mg8cY/4/