如何在同一行上顯示p標籤和輸入

Question

我當前的代碼是：

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

這表明下一行輸入框，我怎麼能顯示p標籤，並在同一個輸入框線？

Answer 1

使用引導形式，水平

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

段通常顯示爲自己的塊。

雖然你可以改變它的樣式來改變它，但你所擁有的不是一個段落，所以你不應該用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 4

您可以使用表無邊框。所以它看起來非常有品味和容易。

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

你可以只用一個span標籤，

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