设置输入元素的样式以填充其容器的剩余宽度
假设我有一个这样的html代码段：
<div style="width:300px;">
<label for="MyInput">label text</label>
<input type="text" id="MyInput" />
</div>
这不是我的确切代码，但重要的是在固定宽度容器的同一行上有一个标签和一个文本输入。如何设置输入的样式以填充容器的剩余宽度，而无需包装并且不知道标签的大小？
问题答案：
尽管每个人都讨厌表的布局，但是他们使用显式表标记或display：table-cell确实对此类事情有所帮助
<div style="width:300px; display:table">
<label for="MyInput" style="display:table-cell; width:1px">label text</label>
<input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>
-
问题内容： 我有这个标题栏。 我需要searchBar来填补div中剩余的空白。我该怎么做？ 这是我的CSS 问题答案： 您可以使用CSS表格单元格实现此布局。 稍微修改您的HTML，如下所示： 只需删除两个元素周围的wrapper 元素即可。 应用以下CSS： 适用于并给它100％的宽度。 对于，，，适用。 对于，将宽度设置为90％，这将迫使所有其他元素计算出缩小以适合的宽度，搜索栏将展开以填充
-
问题内容： 我想要一个两列的div布局，其中每个可以具有可变的宽度，例如 我希望’view’div扩展到’tree’div填充所需空间后可用的整个宽度。 目前，我的“视图” div已调整为包含它的内容的大小，如果两个div都占据整个高度，那也会很好。 问题答案： 这个问题的解决其实很容易，但不是在 所有 明显。您必须触发一种称为“块格式设置上下文”（BFC）的东西，它以特定的方式与浮点数交互。 只
-
问题内容： 如何使div填充剩余宽度？ 我如何才能填满其余部分？ 问题答案： 试试这样的事情： div自然会占用其容器的100％宽度，因此无需显式设置此宽度。通过添加与两侧div相同的左/右页边距，它自己的内容被强制置于它们之间。 请注意，“中间格”云 后 的HTML“正确的div”
-
我有两个div并排放在一个flexbox中。右手边的宽度应该总是一样的，我希望左手边的那个能抓住剩下的空间。但它不会，除非我特别设置它的宽度。 所以目前，它被设置为96%，看起来不错，直到你真的挤压屏幕——然后右手div有点缺乏它需要的空间。 我想我可以让它保持原样，但感觉不对——就像有一种方式可以说： 右边的总是一样的你在左边你得到了剩下的一切
-
问题内容： +--------------------+ | | | | | | | | | 1 | | | | | | | | | +--------------------+ | | | | | | | | | 2 | | | | | | | | | +--------------------+ 如上所示的（1）的内容是未知的，因为它在动态生成的页面中可能会增加或减少。如上所示，第二个div（
-
问题内容： 我正在寻找一种将2个div作为列的方法，其中右侧的div具有固定的宽度，左侧的div填充剩余空间。 有谁碰巧知道是否可以做到这一点？ 我的尝试 （在block1下面提供了block2） ： 问题答案： 您可以这样做： HTML： CSS：