Bootstrap输入表单成一个段落

Question

我尝试使用Bootstrap将输入表单放入段落中。但是，它总是跳进一条新线。

我想要的或多或少是这样的：

但是，我明白了：

我该怎么办？这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

**删除部分文字以正确理解功能。