html - 如何在按钮旁边放置一个液体/flex 文本框？

Question

我想以“flex ”或“流动”方式(正确的术语是什么？)将文本框和按钮放置在彼此旁边，如下所示:

_{(来源:ocactus.org)}

当放置在任意宽度的容器中时(包括调整浏览器窗口的大小)，按钮应右对齐并占据所需的宽度，而文本框应使用剩余的宽度。不幸的是，按钮的宽度不能在 CSS 中固定，因为它取决于标题(不同的操作、语言等)。

什么是适用于跨浏览器的上述解决方案？

Answer 1

我能够让它在一个表中工作(我知道，但它可以工作)，它可以正确处理页面大小调整以及按钮值的变化:

<table class="elastic">
    <tr>
        <td><input class="textbox" type="text"></td>
        <td class="button"><input type="button" value="Test Button"></td>
    </tr>
</table>

可能有一个

样式可供选择。

编辑:我修改了示例以使用以下样式表:

.elastic { width:100%; }
.elastic .textbox { width: 100%; }
.elastic .button { width: 1%; }

关于html - 如何在按钮旁边放置一个液体/flex 文本框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/956919/