html - CSS:如何使 2 个 HTML 输入元素填充 100% 的行，其中一个元素随着另一个元素而增长？

Question

我正在尝试放置 2 个输入元素，它们应该一起填充其容器的宽度。 一个输入元素的 type = "text"， 另一个输入的类型=“按钮”。

我想编写CSS，以便向“按钮”的值添加更长的文本将使其由于其他元素而变得更宽。

我找到了solution for a similar question在SO上发布NSDCars5 ，带有输入元素和标签元素，但我似乎无法根据我的需要调整它。

这就是我所拥有的:

#container{
  background-color: red;
  width: 300px;
  height: 60px;
}

#a{	
  display: inline-block;
  float: left;
}

#b{	
  display: inline-block;
}

<div id="container">
  <input type="text" id="a" placeholder="Name">
  <input type="button" id="b" value="JOIN US! JOIN US!">
</div>

我想要的是，“Name”的输入会变短，以便两个元素都填充其容器宽度的 100%(并且线条不会像现在一样中断)。

提前非常感谢!

Answer 1

Flexbox 可以做到这一点。

支持 IE10 及更高版本。

.container {
  background-color: red;
  width: 300px;
  height: 60px;
  display: flex;
}
.wide {
  width: 100%;
}
.a, .b {
  flex: 1 0 auto;
}

<div class="container">
  <input type="text" class="a" placeholder="Name">
  <input type="button" class="b" value="JOIN US! JOIN US!">
</div>

<div class="container wide">
  <input type="text" class="a" placeholder="Name">
  <input type="button" class="b" value="JOIN US!JOIN US! JOIN US! JOIN US! JOIN US! JOIN US! JOIN US! JOIN US! JOIN US! JOIN US!">
</div>