如何用CSS实现与设计稿一致的联系表单布局？

核心思路 #

利用你熟悉的CSS Grid做二维布局，结合Flex处理局部元素对齐，通过媒体查询实现无缝响应式切换——不用纠结复杂的元素排序，靠Grid的列定义就能轻松适配不同屏幕。

1. 重构HTML结构（方便布局控制） #

给表单内的输入项分组，让Grid能精准控制排列：

<!-- The page's footer. -->
<footer>
    <!-- The contact infos. -->
    <div id="contact" class="white-section">
        <!-- Contact text. -->
        <p class="highlight contact-highlight">Si vous aimez mes travaux ou souhaitez simplement me contacter,</p>
        <p>vous pouvez remplir ce formulaire. Je vous répondrais aussi vite que possible !</p>

        <!-- Contact form. -->
        <form class="form-element" action="php/contact.php" method="post">
            <div class="form-row">
                <div class="form-group">
                    <p>Prénom-Nom<em class="highlight">*</em></p>
                    <input class="form-component" type="text" name="name" autocomplete="off" required>
                </div>
                <div class="form-group">
                    <p>Email<em class="highlight">*</em></p>
                    <input class="form-component" type="email" name="email" autocomplete="off" required>
                </div>
            </div>
            <div class="form-group">
                <p>Objet<em class="highlight">*</em></p>
                <input class="form-component" type="text" name="subject" autocomplete="off" required>
            </div>
            <div class="form-group">
                <p>Message<em class="highlight">*</em></p>
                <textarea class="form-text-area" name="message" autocomplete="off" required></textarea>
            </div>
            <div class="form-submit-container">
                <input class="form-submit" type="submit" value="Send">
            </div>
        </form>
    </div>

    <!-- Footer credits. -->
    <p class="footer-text">© Basset Etienne | All rights reserved.</p>
</footer>

2. CSS布局实现（匹配设计稿） #

用Grid做整体框架，统一输入框样式避免冗余代码：

/* ---------- Footer ---------- */

#contact {
    margin: 10vh auto;
    max-width: 1800px;
    width: 90%;
    padding: 2%;
    border-radius: 10px;
}

/* 顶部文字区域优化 */
#contact > p {
    max-width: 1200px;
    margin: 0.5rem auto;
    text-align: center;
}

.contact-highlight {
    font-size: 1.5em;
    font-weight: 600;
}

/* 表单整体Grid布局 */
.form-element {
    display: grid;
    gap: 2rem;
    max-width: 1200px;
    margin: 2rem auto 0;
}

/* 姓名+邮箱两列布局 */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* 单个输入项组对齐 */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 统一输入框样式 */
.form-component, .form-text-area {
    font-family: Poppins, Arial, Helvetica, sans-serif;
    border-radius: 5px;
    border: none;
    background-color: #DAD8DD;
    color: #0D0221;
    padding: 0.8rem 1rem;
    width: 100%;
}

.form-text-area {
    min-height: 150px;
    resize: vertical;
}

/* 按钮容器控制位置 */
.form-submit-container {
    display: flex;
    justify-content: flex-end;
}

.form-submit {
    font-family: Poppins, Arial, Helvetica, sans-serif;
    border-radius: 10px;
    border: none;
    background-color: #F50056;
    color: #ffffff;
    font-size: 1em;
    padding: 0.8rem 2rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.form-submit:hover {
    background-color: #d3004a;
}

.footer-text {
    color: #ffffff;
    text-align: center;
}

3. 响应式适配（小屏幕自动切换） #

添加媒体查询，在手机端自动改成单列布局：

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-submit-container {
        justify-content: center;
    }
    
    #contact {
        width: 95%;
        padding: 1.5rem;
    }
}

优势说明 #

• Grid天生适合表单这种二维布局，两列/单列切换只需要改grid-template-columns，完全不用调整元素顺序
• 用padding代替固定宽高（vw/vh），输入框在不同屏幕下的尺寸更自然
• 分组结构让代码更易维护，后续修改布局只需要调整Grid参数

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