如何实现联系表单中名字与姓氏输入框的横向并排布局？

安全阿岳

2026-7-30

实现联系表单中名字与姓氏输入框横向并排布局

我正在制作一个联系表单，希望设置名字（First name）和姓氏（Last name）两个独立输入框，而非使用单个全名输入框，期望实现名字与姓氏输入框横向并排的效果。尝试使用display:inline-block; float:left, text-align:left;等CSS属性后仍未达到预期，以下是我的HTML和CSS代码，请求帮助实现目标布局：

原HTML代码：

<section id="contact-form">
    <form method="POST" action="#">
        <h3>您可以通过以下渠道联系我，或填写下方表单</h3>
        <ul id="contact-list">
            <li>
                <a href="#" target="_blank" rel="noopener" aria-label="Message me on WhatsApp (Open in a new tab)"><i class="fa-brands fa-whatsapp"></i> 
                +1234567890</a>
            </li>
            <li>
                <a href="#" target="_blank" rel="noopener" aria-label="Send me an email (Open in a new tab)"><i class="fa-regular fa-envelope"></i>
                email@gmail.com</a>
            </li>
        </ul>

        <label for="fname" class="names">名字：</label>
        <label for="lname" class="names">姓氏：</label>
        <br>
        <input type="text" name="first-name" id="fname" required>
        <input type="text" name="last-name" id="lname" required>
        <br>
        <label for="email">邮箱：</label>
        <br>
        <input type="email" name="e-mail" id="email" required>
        <br>
        <label for="message">您的留言：</label>
        <br>
        <textarea name="user-message" id="message" cols="30" rows="10" placeholder="在此输入您的留言..."></textarea>
    </form>
</section>

原CSS代码：

form {
    border: 3px solid #81a97b;
    border-radius: 5px;
    width: 50%;
    margin: 0 auto;
    height: 450px;
    min-width: 320px;
    text-align: center;
    padding: 3em;
}

#contact-list li{
    display: inline-block;
    margin: 20px 12px;
}

#contact-list a{
    color: #4d4d4d;
    font-size: 130%;
}

input, textarea{
    border: 1px solid #ffb30f
}

.names {
    float:left;
    margin-left: 103px;
}

#fname, #lname {
    width: 40%;
    margin: 5px 20px;
}

#email {
    width: 100%;
}

textarea {
    resize: none;
}

解决方案：调整结构+Flex布局实现并排

原代码的问题在于标签和输入框的结构分散，float属性容易导致布局混乱。我们可以通过分组包裹和Flex布局来实现稳定的横向并排效果：

修改后的HTML代码：

<section id="contact-form">
    <form method="POST" action="#">
        <h3>您可以通过以下渠道联系我，或填写下方表单</h3>
        <ul id="contact-list">
            <li>
                <a href="#" target="_blank" rel="noopener" aria-label="Message me on WhatsApp (Open in a new tab)"><i class="fa-brands fa-whatsapp"></i> 
                +1234567890</a>
            </li>
            <li>
                <a href="#" target="_blank" rel="noopener" aria-label="Send me an email (Open in a new tab)"><i class="fa-regular fa-envelope"></i>
                email@gmail.com</a>
            </li>
        </ul>

        <!-- 用容器包裹名字和姓氏的输入组 -->
        <div class="name-group">
            <div class="input-group">
                <label for="fname">名字：</label>
                <input type="text" name="first-name" id="fname" required>
            </div>
            <div class="input-group">
                <label for="lname">姓氏：</label>
                <input type="text" name="last-name" id="lname" required>
            </div>
        </div>

        <div class="input-group full-width">
            <label for="email">邮箱：</label>
            <input type="email" name="e-mail" id="email" required>
        </div>

        <div class="input-group full-width">
            <label for="message">您的留言：</label>
            <textarea name="user-message" id="message" cols="30" rows="10" placeholder="在此输入您的留言..."></textarea>
        </div>
    </form>
</section>

修改后的CSS代码：

form {
    border: 3px solid #81a97b;
    border-radius: 5px;
    width: 50%;
    margin: 0 auto;
    min-width: 320px;
    padding: 3em;
    /* 移除固定高度，让表单自适应内容 */
    height: auto;
    /* 用Flex垂直排列表单元素 */
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

#contact-list {
    margin: 0;
    padding: 0;
}

#contact-list li{
    display: inline-block;
    margin: 0 12px;
}

#contact-list a{
    color: #4d4d4d;
    font-size: 130%;
}

input, textarea{
    border: 1px solid #ffb30f;
    padding: 0.5em;
    border-radius: 4px;
    box-sizing: border-box;
}

/* 名字分组用Flex实现横向并排 */
.name-group {
    display: flex;
    gap: 1em;
    justify-content: center;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    width: 45%;
}

.full-width {
    width: 100%;
}

.input-group label {
    text-align: left;
}

textarea {
    resize: none;
    width: 100%;
    box-sizing: border-box;
}

关键修改说明：

结构优化：将每个输入项（标签+输入框）用input-group包裹，名字和姓氏的输入组再用name-group包裹，让布局结构更清晰。
Flex布局替代Float：用display: flex实现横向并排，避免float导致的清除浮动、布局错位问题，同时通过gap属性控制元素间距，更易维护。
自适应调整：移除表单的固定高度，让表单根据内容自动调整；添加box-sizing: border-box确保输入框宽度包含内边距，避免溢出。
对齐优化：设置标签左对齐，提升视觉一致性，同时保持整体表单居中。

内容的提问来源于stack exchange，提问作者yamesjames