我需要用一个按钮和输入填充一个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>
发布于 2018-05-31 17:23:01
这是因为您的容器宽度小于分配给<input>
元素的默认宽度。因此,您可以增加容器的width
,也可以使用以下代码。
.bar_input {
font-size: 15px;
height: 20px;
box-sizing: border-box;
width: calc(100% - 37px);
}
发布于 2018-05-31 17:16:37
使用bootstrap可以向按钮.btn-block添加类,否则可以向按钮添加样式宽度: 100%;
https://stackoverflow.com/questions/50620677
复制相似问题