html - 拉伸(stretch)输入文本以填充它所在的分区

Question

我有一个包含标签和输入文本的 HTML div。我希望标签占用最小空间，并将剩余空间留给文本输入。换句话说，一旦标签占据了它的空间，我希望文本输入水平延伸到它所在的 div 的末尾。这是我正在使用的示例代码。

<div>
    <label >Some Label</label>  <!--Should take minimum space -->
    <input type="text"/>        <!--Should stretch horizontally to fill up entire div --> 
</div>

Answer 1

demo here

不完美，但你可以尝试在其中实现

我找到了这段代码

<div class="notificationArea">
    <label >Some Label</label>  
    <input type="text"/>
</div>

这里是CSS

.notificationArea
{
    width: 100%;
    vertical-align: left;
    text-align:left;
    background: #ccc;
    display: table;
}
.notificationArea label, .notificationArea input {
    display: table-cell
}
.notificationArea input {
    width: 100%
}