Wie p-Tag und Eingang auf der gleichen Linie

Question

Mein aktueller Code angezeigt ist:

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

Dies das Eingabefeld in der nächsten Zeile zeigt, wie kann ich die p-Tag und das Eingabefeld auf der gleichen Anzeige Linie?

Answer 1

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

display: inline-block ist dein Freund:

p { 
 
    display: inline-block; 
 
}

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

Answer 3

Die Absätze sind in der Regel als Block ihrer eigenen angezeigt.

Während Sie das Styling ändern können, um das zu ändern, ist das, was Sie haben, kein Absatz, also sollten Sie es nicht mit dem Element p markieren.

Verwenden Sie stattdessen a label element. Abgesehen davon, dass es sich um das korrekte Markup handelt, handelt es sich um ein Inline-Element, das standardmäßig in derselben Zeile dargestellt wird.

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

Answer 4

Sie Tisch ohne Rand verwenden können. Es sieht also sehr geschmackvoll und einfach aus.

<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

Sie könnten nur einen span-Tag verwenden,

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