html - 如何并排获得两个输入，其余输入在不同的行上？

Question

我有一个表单，我想让用户填写。我想将其布局为名称字段彼此相邻，所有其他字段都在各自的单独行上。

我已经使用了下面的代码，尝试过放置段落和“brs”，但仍然没有运气......

下面的代码:

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

返回下图:

因此，出于某种原因，电子邮件地址标签非常不合适(它应该在读取 1500 的输入上方 - 电话在数字上方的方式我确定这是一个愚蠢的小东西，但我就是无法放置它

我尝试了“

”和“
”的各种组合，但都无济于事。

Answer 1

您需要添加“清除两者”(<div style="clear:both"></div>)以防止下面的内容与您的 2 个 float div 混淆。

示例代码:

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

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

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

<!-- more goes here -->