0

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

[LABEL width: 20%] [margin-left:1em] [此行的剩余空间应由输入字段填充]

我遇到的问题是，标签和边距已经成功。但是我必须将输入字段的宽度设置为 80%，这样它就可以在线了，但是调整它的大小不会再次填满该行。

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

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

4

1 回答 1

0

仅使用 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/

于 2013-07-30T18:09:16.497 回答