用按钮和输入填充div的宽度答案

【问题标题】：Fill the width of div with button and input用按钮和输入填充div的宽度
【发布时间】：2018-11-10 06:04:21
【问题描述】：

我需要用一个按钮和输入填充一个 div 元素。按钮将具有准确的宽度，其余部分将填充输入。在我的代码中，我什至无法设置按钮的宽度，并且输入总是比父级宽。

然后我将overlay: hidden 设置为.bar，这样按钮的输入看起来就像我想要的那样。但要让它表现得像我想要的那样，我需要正确设置提到的宽度。那么我能做些什么来用这个精确宽度的按钮填充这个父 div 并输入其宽度的其余部分，但仅此而已？我尝试了很多属性，没有任何帮助。唯一的条件是，我希望 display: flex 保留在代码中，其他所有内容都可以更改。感谢您的建议。

.container {
  width:205px;
}

.bar {
  border-radius: 25px;
  box-sizing: border-box;
  display: flex;
  //overflow: hidden;
}

.bar_input {
  font-size: 15px;
  height: 20px;
  box-sizing: border-box;
  width: 100%;
}

.bar_button {
  padding: 8px 8px 14px 1px;
  width: 37px;
  height: 35px;
  left: 3px;
  right: auto;
}

 <div class="container u-l-fr" style="background-color: darkred">
    <div class="container-bar" style="background-color: darkblue">
      <div class="bar" style="background-color: gold">
        <button aria-label="Search" class="bar_button" role="button" type="button" style="background-color: black;"></button>
        <input class="bar_input" id="search_input" placeholder="Search">
      </div>
    </div>
</div>

【问题讨论】：

标签： html css button input

【解决方案1】：

这是因为您的容器宽度小于分配给<input> 元素的默认宽度。因此，您可以增加容器的width 或使用此代码。

.bar_input {
  font-size: 15px;
  height: 20px;
  box-sizing: border-box;
  width: calc(100% - 37px);
}

【讨论】：

谢谢，我不知道这个默认宽度。
乐于助人。继续编码:)

【解决方案2】：

使用引导程序，您可以将类添加到按钮 .btn-block 否则，您可以添加样式宽度：100%；到按钮

【讨论】：

我不想为了这件小事就开始在我的项目中使用引导程序。正如我所说，我想为按钮设置精确的宽度并将其设置为 100% 不会改变此代码，您可以尝试一下。