Question

我正在使用unsemantic grid来创建我的布局。好吧，我有一个容器，我有一个Label和一个inputtext。标签的宽度为20％，然后是1em的margin-right，然后我希望容器中的其余空间由inputfield填充，基本上它应该是这样的

[LABEL宽度：20％] [margin-left：1em] [此行上的剩余空间应填入输入字段]

我遇到的问题是，标签和保证金已成功。但是我必须给出80％的输入字段宽度，这样它才会在线上，但是当它重新调整它时，它不会再填满这条线。

我做了一个小小的快速小提琴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/

让一行上的所有东西都填满了

1 个答案: