样式输入元素填充其容器的剩余宽度 [英] Style input element to fill remaining width of its container

问题描述

假设我有一个html片段，如下所示：

Let's say I have an html snippet like this:

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

这不是我的确切代码，但重要的是有一个标签和一个文本输入同一行在固定宽度的容器中。

This isn't my exact code, but the important thing is there's a label and a text input on the same line in a fixed-width container. How can I style the input to fill the remaining width of the container without wrapping and without knowing the size of the label?

推荐答案

如何设置输入以填充容器的剩余宽度而不需要包装和不知道标签的大小？尽管每个人都讨厌使用表格来布局，但是他们使用显式的表格标签或者使用display：table-cell

as much as everyone hates tables for layout, they do help with stuff like this, either using explicit table tags or using 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>

这篇关于样式输入元素填充其容器的剩余宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！