Question

我目前的代码是：

null

这显示下一行的输入框，如何在同一行显示p标签和输入框？

Answer 1

段落通常显示为自己的块。

虽然您可以更改它的样式以更改它，但您拥有的不是段落，因此您不应使用p元素标记它。

请改用a label element。除了是正确的标记之外，它是一个内联元素，因此默认情况下会在同一行上呈现。

<div class="row" id="loginForm">
        <label for="usr">Username : </label>
        <input type="text" class="form-control input" id="usr">
</div>

Answer 2

display: inline-block是你的朋友：

p {
  display: inline-block;
}

<div class="row" id="loginForm">
  <p>Username:</p>
  <input type="text" class="form-control input" id="usr">
</div>

Answer 3

您可以使用没有边框的表。所以它看起来非常有品味和容易。

<div class="row" id="loginForm">
    <table border="0">
      <tr>
        <td><p>Username : </p></td>
        <td><input type="text" class="form-control input" id="usr"></td>
     </tr>
   </table>
</div>

Answer 4

使用Bootstrap form-horizontal

<form class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-2" for="usr">Username:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control input" id="usr">
      </div>
    </div>
</form>

Answer 5

您可以使用span标记

    <div class="row" id="loginForm">
    <p>Username : <span><input type="text" class="form-control input" id="usr"></span></p>
    </div>

Answer 6

您只需将输入内容包装到标记中，就不必使用for属性。

HTML：

<div class="row" id="loginForm">
    <label
        >Username : 
        <input type="text" class="form-control input" id="usr">
    </label>
</div>

CSS：

label {
    display: block;
}
label > p {
    display: inline-block;
}

Answer 7

使用boostrap时，您只需添加水平表单类，即可为您工作

如何在同一行显示p标签和输入

7 个答案: