Html 拉伸输入文本以填充其包含的分区

Html 拉伸输入文本以填充其包含的分区,html,css,Html,Css,我有一个HTML div,其中包含一个标签和输入文本。我希望标签占用最小空间,并为文本输入提供剩余空间。换句话说,一旦标签占据了它的空间,我希望文本输入水平延伸到它所包含的div的末尾。下面是我正在使用的示例代码 <div> <label >Some Label</label> <!--Should take minimum space --> <input type="text"/> <!--Sh

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

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

一些标签

不是完美的,但你可以试着用它来实现

我找到了这个密码

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

这将导致一个非常混乱的外观,一些研究表明,输入上面的标签对我们的大脑处理和推导意义更快。这可能不值得花时间让它工作。你可能是对的,但我必须尽可能多地打包,这样用户就不会真正需要滚动页面。若我把标签和输入分别放在不同的行上,我会失去一些垂直的空间。我在发布问题之前已经试过这个代码了。它在IE9中工作,但谷歌浏览器不会拉伸输入文本。无论如何,谢谢你的回复。试着在
输入
周围添加一个额外的元素,改为
显示:表格单元格
.notificationArea
{
    width: 100%;
    vertical-align: left;
    text-align:left;
    background: #ccc;
    display: table;
}
.notificationArea label, .notificationArea input {
    display: table-cell
}
.notificationArea input {
    width: 100%
}