用按钮和输入填充div的宽度
用按钮和输入填充div的宽度
提问于 2018-05-31 17:13:26
我需要用一个按钮和输入填充一个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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-31 17:23:01
这是因为您的容器宽度小于分配给<input>元素的默认宽度。因此，您可以增加容器的width，也可以使用以下代码。
.bar_input {
font-size: 15px;
height: 20px;
box-sizing: border-box;
width: calc(100% - 37px);
}Stack Overflow用户
发布于 2018-05-31 17:16:37
使用bootstrap可以向按钮.btn-block添加类，否则可以向按钮添加样式宽度: 100%；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50620677
复制相关文章
相似问题