我正在尝试创建一个将用于移动和桌面用户的简单数字选择器。我的想法是使输入由“加号”和“减号”按钮包围。
除了输入字段的响应能力之外，其他所有东西都工作正常。不知何故，它不会缩小到容器的剩余大小。
因此，我想2 rem在输入周围采用固定大小的跨度（在我的情况下），该跨度占用容器的所有剩余宽度。
这是代码：
body {
background: #f5f5f5;
}
.outer-container {
width: 300px;
border: 1px solid gray;
padding: 10px;
}
.container {
display: inline-flex;
align-items: center;
}
.item {
dsipaly: inline-block;
height: 2rem;
width: 2rem;
font-size: 2rem;
line-height: 2rem;
border: 1px solid black;
border-radius: 50%;
text-align: center;
}
input {
font-size: 2rem;
margin: 0 10px;
}<div class="outer-container">
<div class="container">
<span class="left item">-</span>
<input type="text" />
<span class="right item">+</span>
</div>
</div>我创建了一个使用flexbox但不会缩小输入且不会溢出容器的布局。
是否可以缩小输入以占据所有可用容器宽度而不会在X轴上溢出容器？
您可以尝试以下方法：
body {
background: #f5f5f5;
}
.outer-container {
width: 300px;
border: 1px solid gray;
padding: 10px;
}
.container {
display: inline-flex;
align-items: center;
}
.item {
height: 2rem;
width: 2rem;
font-size: 2rem;
line-height: 2rem;
border: 1px solid black;
border-radius: 50%;
text-align: center;
}
input {
font-size: 2rem;
margin: 0 10px;
min-width:0; /* Remove the automatic minimum size set so the element can shrink*/
width: 87%; /* Set any value of width here as reference*/
flex: 1; /* make the item grow to fill the remaining space */
}<div class="outer-container">
<div class="container">
<span class="left item">-</span>
<input type="text" >
<span class="right item">+</span>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句