如何使输入元素排列成行

Question

我的表单我正在进行免费代码营产品登录页项目。我即将完成，我最不想添加的是一个2列的表单。我已经排列了标签元素，但它看起来很难看，因为输入元素没有排列，我想不出一种方法来按照我想要的方式定位它们。

``HTML

<!-- Order Section -->
<div id="order-wrapper">
<section id="order-section">
<h2>Order</h2>
<form id="order-form">

<label class="order-box">Product Name
<input>
</label>
<label class="order-box">Quantity
<input>
</label>
<label class="order-box">First Name
<input>
</label>
<label class="order-box">Last Name
<input>
</label>
<label class="order-box">E-mail
<input>
</label class="order-box">
<label>Phone Number
<input>
</label>
<label class="order-box">Street Address
<input>
</label>
</form>
</section>
</div>
<!-- End Order Section -->

/* Order Section */
#order-wrapper{
background-color: rgba(245, 202, 195, 1);
height: 40rem;

}

#order-form{
width: 100%;

}

#order-form label{
display: inline-block;
width: 25%;
margin-left: 20%;
margin-top: 4%;

}

#order-form input{
width: 60%;
margin-left: 5%;

}

#order-section h2{
font-family:'Homemade Apple', cursive;
font-size:2rem ;
font-weight: 500;
text-align: center;
padding-top: 2%;
margin-top: 0.8%;

}

/*结束订单部分*/

Answer 1

不确定这是否是您想要的样式，您可以使用表。

HTML

<div id="order-wrapper">
<section id="order-section">
<h2>Order</h2>
<form id="order-form">
<table style="list-style: none;">
<tr>
<td><label class="order-box">Product Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Quantity</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">FIrst Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Last Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Email</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Phone Number</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Street Address</label></td>
<td><input></td>
</tr>
</table>
</form>
</section>
</div>

我只是把所有东西都移到一个表中，所以默认情况下它应该把所有东西排成一行。您可能需要进一步调整css样式。如果你愿意一些更接近你之前拥有的东西，你也可以尝试拆分分成两个表，这样您就可以将两列放在一起，而不是将所有内容都放在一列中。

下面是一个有两个表的例子：

<div id="order-wrapper">
<section id="order-section">
<h2>Order</h2>
<form id="order-form">
<table style="list-style: none;">
<tr>
<td><label class="order-box">Product Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Quantity</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">FIrst Name</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Last Name</label></td>
<td><input></td>
</tr>
</table>
<table>
<tr>
<td><label class="order-box">Email</label></td>
<td> <input> </td>
</tr>
<tr>
<td><label class="order-box">Phone Number</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Street Address</label></td>
<td><input></td>
</tr>
<tr>
<td><label class="order-box">Something Else..</label></td>
<td><input></td>
</tr>
</table>
</form>
</section>
</div>

我的CSS:

#order-form{
width: 100%;
}
#order-form label{
display: inline-block;
width: 25%;
margin-left: 20%;
margin-top: 4%;
}
#order-form input{
width: 60%;
margin-left: 5%;
}
#order-section h2{
font-family:'Homemade Apple', cursive;
font-size:2rem ;
font-weight: 500;
text-align: center;
padding-top: 2%;
margin-top: 0.8%;
}
table {
position: relative;
display: inline-block;
}