html - 在 TextBox 旁边放置一个 Button，总宽度为 100%

Question

当 Button 具有给定宽度(通过它的值)并且 Parent div 也具有给定宽度时，是否可以将 Button 放置在 TextBox 旁边。最后TextBox的宽度+Button的宽度应该是父div的宽度。

测试示例:

#left
{
    float: left;
    width: 100%;
}
#right 
{
    width: auto;
}

<div>
    <input type="text" id="left"/>
    <input type="button" id="right" value="AnyText"/>
</div>

谢谢!

Answer 1

form { display: flex; }
input[type=text] { flex-grow: 1; }

<form>
  <input type="text">
  <input type="button" value="Button text">
</form>