引导输入表单进入段落

Question

我正在尝试使用 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>

Answer 1

将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>

Answer 2

在同一行中显示像<p>和<div>这样的块元素的最佳方法是使用inline block。你也可以使用inline。 但是 inline 和 inline-block 之间的主要区别是， inline-block 允许您指定元素的尺寸、内边距和边距，而 inline 只是包裹元素。

这是working fiddle

CSS：

#block1, #block2, #block3
{
    display:inline-block;
}

HTML：

<div id="text" class="form-inline">
  <p id="block1">Lorem ipsum ....</p>
  <div id="block2">
  <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>
   </div>
  <p id="block3">...inct labore et dolore magna aliqua.</p>

</div>

** 删除一些文本以正确理解功能。