どのように同じ行に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>