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

小编典典

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

all

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

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

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

阅读 60

2022-06-14

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

2022-06-14