将输入表单引导到段落中
将输入表单引导到段落中
提问于 2017-07-17 15:55:22
我正在尝试使用Bootstrap将输入表单放入段落中。但是，它总是跳到一个新行中。
我想要的，或多或少，是这样的：
但是，我得到了这个：
我能做什么?下面是我的代码：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="text" class="form-inline">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
<div class="input-group">
<select class="form-control" id="sel1" style="width:auto;">
<option>nope</option>
<option selected>tempor</option>
<option>not this one</option>
<option>wrong</option>
</select>
<span class="input-group-addon" style="width:auto;">select option</span>
</div>
<p>...incididunt ut labore et dolore magna aliqua.</p>
<br>
</div>
回答 1
Stack Overflow用户
发布于 2017-07-17 16:06:36
将style="display: inline"添加到<p>元素，将style="display: inline-block"添加到class="input-group"。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="text" class="form-inline">
<p style="display: inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
<div class="input-group" style="display: inline-block">
<select class="form-control" id="sel1" style="width:auto;">
<option>nope</option>
<option selected>tempor</option>
<option>not this one</option>
<option>wrong</option>
</select>
<span class="input-group-addon" style="width:auto;">select option</span>
</div>
<p style="display: inline">...incididunt ut labore et dolore magna aliqua.</p>
<br>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45138752
复制相关文章
相似问题
腾讯云开发者
