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

Question

我当前的代码是：

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

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

原文由 nikhil gumidelli 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Raj 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

段落通常显示为它们自己的一个块。

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

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

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

原文由 Quentin 发布，翻译遵循 CC BY-SA 3.0 许可协议