样式输入元素以填充其容器的剩余宽度

Question

假设我有一个这样的 html 片段：

 <div style="width:300px;">
    <label for="MyInput">label text</label>
    <input type="text" id="MyInput" />
</div>

这不是我的确切代码，但重要的是在固定宽度容器的同一行上有一个标签和一个文本输入。如何在不包装且不知道标签大小的情况下设置输入以填充容器的剩余宽度？

原文由 Joel Coehoorn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尽管每个人都讨厌表格进行布局，但他们确实可以帮助处理这样的事情，无论是使用明确的表格标签还是使用 display:table-cell

 <div style="width:300px; display:table">
    <label for="MyInput" style="display:table-cell; width:1px">label&nbsp;text</label>
    <input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>

原文由 cobbal 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是一个简单干净的解决方案，不使用 JavaScript 或表格布局技巧。它类似于这个答案： Input text auto width filling 100% with other elements floating

用 display:block 的跨度包装输入字段很重要。接下来是按钮必须先出现，然后是输入字段。

然后你可以将按钮向右浮动，输入字段填充剩余空间。

 form {
    width: 500px;
    overflow: hidden;
    background-color: yellow;
}
input {
    width: 100%;
}
span {
    display: block;
    overflow: hidden;
    padding-right:10px;
}
button {
    float: right;
}

 <form method="post">
     <button>Search</button>
     <span><input type="text" title="Search" /></span>
</form>

一个简单的小提琴：http: //jsfiddle.net/v7YTT/90/

更新 1： 如果您的网站仅针对现代浏览器，我建议使用 flexible boxes 。在这里您可以看到 当前的支持。

更新 2： 这甚至适用于多个按钮或与输入字段共享完整内容的其他元素。这是 一个例子。

原文由 danijar 发布，翻译遵循 CC BY-SA 4.0 许可协议