2つの入力を並べて別の行に残すにはどうすればいいですか？

Question

私はユーザに記入したいフォームを持っています。名前欄が隣り合っていて、他のすべてのフィールドはそれぞれ別々の行になっています。

：

<div style="float:left;"> 
    <label for="username"><b>First Name*</b><span class="required"></span> </label> 
    <input id="user_first_name" name="FirstName" size="30" type="text"  placeholder="First" /> 
</div> 

<div style="float:right;"> 
    <label for="name"><b>Last Name*</b><span class="required"></span></label> 
    <input id="user_last_name" name="LastName" size="30" type="text"  placeholder="Last"/> 
</div> 
<!--<label><b>Full Name </b><span class="required">*</span></label><input  type="text" name="FirstName" class="field-divided" placeholder="First"  style="float:left" />;<input type="text" name="Surname" class="field-divided"  placeholder="Last" style="float:right"/> <p></p>--> 
<label><b>Email </b><span class="required">*</span></label><input  type="email" name="Email" class="field-long" placeholder="Email" value="<?php  echo $_POST['Turnover']; ?>" /> 
<label><b>Phone </b><span class="required">*</span></label><input  type="number" name="Phone" class="field-divided" placeholder="Number" /> 
<label style="font-size:10px">only numbers, no special characters</label> 

下の画像を返します：

は、私は以下の

コードは...段落と "BRS"、まだ運を入れて試してみましたが、以下のコードを使用しています

何らかの理由で電子メールアドレスラベルが非常に外れています（1500を読み上げている入力より上にある必要があります - 電話番号が数字より上にあるようにしてください）。 私はそれが馬鹿げた小さなことだと確信していますが、私はそれを置くことができません

"< p>"と "< br>"のさまざまな組み合わせを試しましたが、役に立たないです。インターネット上のCSSとHTMLについての記事を読む

Answer 1

あなたが2つの浮動divをと混ざっ以下の内容を防ぐために（<div style="clear:both"></div>）「の両方をクリア」を追加する必要があります。

例コード：

<div style="float:left;"> 
<!-- something here --> 
</div> 

<div style="float:right;"> 
<!-- something here --> 
</div> 

<div style="clear:both"></div> 

<!-- more goes here --> 

Answer 2

.flexi{ 
 
display:flex; 
 
flex-flow:row; 
 
}

<div class="flexi"> 
 
<div> 
 
    <label for="username"><b>First Name*</b><span class="required"></span> </label> 
 
    <input id="user_first_name" name="FirstName" size="30" type="text"  placeholder="First" /> 
 
</div> 
 

 
<div> 
 
    <label for="name"><b>Last Name*</b><span class="required"></span></label> 
 
    <input id="user_last_name" name="LastName" size="30" type="text"  placeholder="Last"/> 
 
</div> 
 
</div> 
 
<div> 
 
<!--<label><b>Full Name </b><span class="required">*</span></label><input  type="text" name="FirstName" class="field-divided" placeholder="First"  style="float:left" />;<input type="text" name="Surname" class="field-divided"  placeholder="Last" style="float:right"/> <p></p>--> 
 

 
<div> 
 
<label><b>Email </b><span class="required">*</span></label><input  type="email" name="Email" class="field-long" placeholder="Email" value="<?php  echo $_POST['Turnover']; ?>" /> 
 

 
</div> 
 

 
<div> 
 
<label><b>Phone </b><span class="required">*</span></label><input  type="number" name="Phone" class="field-divided" placeholder="Number" /> 
 
<label style="font-size:10px">only numbers, no special characters</label> 
 

 
</div> 
 
</div>

。 フローティングでは、親が高さを削除します。ザッツミル

で、なぜよメールポップ

https://jsfiddle.net/d69Lxmst/3/

Answer 3

私があなただったら、私は、ブートストラップのようなものを使用します。

input { 
 
    width: 100%; 
 
    display: block; 
 
} 
 

 
div.inline { 
 
    width: 100%; 
 
    display: table; 
 
} 
 

 
div.inline div { 
 
    display: table-cell; 
 
} 
 

 
div.inline div:nth-child(n+2) { 
 
    padding-left: 10px; 
 
}

<div class="inline"> 
 
    <div> 
 
    <label>First Name:</label> 
 
    <input> 
 
    </div> 
 
    <div> 
 
    <label>Last Name:</label> 
 
    <input> 
 
    </div> 
 
</div> 
 
<div> 
 
    <label>Email:</label> 
 
    <input> 
 
</div> 
 
<div> 
 
    <label>Phone:</label> 
 
    <input> 
 
</div>

Answer 4

divの中にあなたの下3つの入力とラベルをラップし、各入力に100％の幅を追加し、ラベル

<div style="width:100%;clear:both;display:block;"> 

<label style="width:100%;display:block;"></label 

<input style="width:100%;display:block;"> 

</div>