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

小编典典

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

html

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

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

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

阅读 272

2020-05-10

共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>

2020-05-10