如何使输入元素对齐？

Question

my form 我正在从事免费代码营产品登陆页面项目。我即将完成，我要添加的最后一件事是 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;
}