如何并排获得两个输入，其余输入分开？

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的输入 - 电话高于数字的方式） 我确定这是一个愚蠢的小东西，但我不能放置它

我尝试了“＆lt; p＆gt;”的各种组合和“＆lt; br＆gt;”，但无济于事。

Answer 1

您需要添加“清除两者”（<div style="clear:both"></div>）以防止下面的内容与您的2个浮动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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在互联网上阅读css和html。 浮动导致父删除高度。这就是为什么你的电子邮件在工厂弹出

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

Answer 3

如果我是你，我会使用类似Bootstrap的东西。但是，这是一个自定义解决方案：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

将底部的3个输入和标签包装在div中，并为每个输入和标签添加100％的宽度

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

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

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

</div>