我正在尝试做的是创建一个div包含标题和输入字段的容器。我已经完成了此操作，但是由于某种原因，我无法将输入保存在父容器中。理想情况下，我希望它可以根据其容器的大小进行缩放。我希望标题和输入始终是容器内的容器。因此，这两个元素后面应始终带有灰色背景。我在这里有一个jsFiddle 。我将不胜感激。谢谢！
<div class="front-page-container-search">
<h3>This is the text I will have in my bubble. Yet when I shrink my screen the input moves down. </h3>
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Find artist...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
.front-page-container-search {
position: absolute;
left: 10%;
right: 10%;
height: 100px;
color: white;
text-align: center;
top: 100px;
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid black;
border-radius: 18PX;
padding: 15px;
}
在这种情况下，您所需要做的就是删除，height并让容器采用内容的默认高度。指定固定高度不会为您提供响应速度，并且当屏幕尺寸较小或调整大小时，内容将被强制占用有限的高度。让布局引擎根据内容为您计算高度，以确保所有内容都在父级中呈现。
.front-page-container-search {
position: absolute;
left: 10%;
right: 10%;
color: white;
text-align: center;
top: 100px;
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid black;
border-radius: 18PX;
padding: 15px;
}<div class="front-page-container-search">
<h3>This is the text I will have in my bubble. Yet when I shrink my
screen the input moves down. </h3>
<form>
<div class="input-group myform">
<input type="text" class="form-control" placeholder="Find artist...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search">Search</span>
</button>
</span>
</div>
</form>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句