Question

我需要用按钮和输入填充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>

Answer 1

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

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

Answer 2

使用bootstrap可以将类添加到按钮.btn-block 否则你可以添加样式宽度：100％;到按钮

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

2 个答案: