如何让表单输入框与textarea并排显示而非重叠？

嘿，我明白你现在的困扰——表单里的输入框组和文本框总是叠在一起，这确实挺烦人的。咱们先找找问题根源，再一步步解决它：

问题分析 #

你现在用float来实现左右布局，但有几个关键点没处理好：

• 盒模型默认是content-box，设置width:50%后，元素的padding、border会额外占用宽度，导致两个50%的盒子总宽度超过父容器，从而重叠。
• float布局需要父元素清除浮动，否则可能出现高度塌陷或布局错位的问题。
• 原布局里的一些固定宽度（比如#section4设死1903px）不够灵活，在不同屏幕尺寸下容易出问题。

解决方案：改用Flex布局（更稳定现代） #

我推荐直接用Flex布局代替float，它能更轻松地实现并排布局，还能自动处理盒模型和对齐问题。下面是修改后的代码：

修改后的CSS代码 #

/*******************************************************************************/
/* Section 4: Contact Area */
#section4{ width: 100%; /* 改用百分比适配不同屏幕 */ }
#contact_area{ 
    background-color:red; 
    padding-top:80px; 
    padding-bottom:60px; 
    width: 100%; /* 去掉固定宽度，让它自适应 */
}
.contact_container{ 
    background-color:orange; 
    margin: 0 auto; /* 用auto实现居中，比固定margin更灵活 */
    padding:0 15px; 
    max-width:750px; 
}
#contact_row_1A{ display: block; /* 没必要用table，直接block即可 */ }
.contact_column_1{ /* 去掉float，让内容自然排列 */ }
.contact_content_1A{ text-align:center; }
#contact_row_1B{ display: block; }
#contact_column_2{ 
    padding:0 15px; 
    width: 100%; /* 自适应父容器 */
}
#contact_text{ 
    background-color:rgba(242,242,242,0.4); 
    border-radius:5px; 
    font-size:18px; 
    padding:15px 0; 
}
#contact_row_2A{ 
    display: flex; /* 关键：改用flex布局 */
    gap: 20px; /* 给左右列之间加间距，避免挤在一起 */
    width:100%; /* 自适应父容器 */
}
/* 左右列设置 */
#contact_column_form_left{ 
    flex: 1; /* 让两个列平分可用空间 */
    padding:0; 
}
#contact_column_form_right{ 
    flex: 1; /* 平分空间 */
    padding:0; 
}
.form_control{ 
    margin-bottom:15px; 
    width:100%; 
    box-sizing: border-box; /* 关键：让width包含padding和border，避免超出容器 */
}
#name_input, #email_input, #subject_input{ 
    background-color:rgba(242,242,242,0.4); 
    border:none; 
    border-radius:4px; 
    padding:6px 12px; 
    width:100%; 
    box-sizing: border-box; /* 统一盒模型 */
}
textarea.form_control{ 
    background-color:rgba(242,242,242,0.4); 
    border:none; 
    border-radius:4px; 
    height:auto; 
    padding:6px 12px; 
    width:100%; 
    box-sizing: border-box; 
    resize: vertical; /* 让用户只能垂直拉伸文本框，保持布局稳定 */
}
#contact_btn{ 
    background:#262628; 
    border:1px solid #ccc; 
    border-radius:10px; 
    color:#fff; 
    font-size:18px; 
    padding:10px 30px; 
    cursor: pointer; /* 加个鼠标指针，提升交互体验 */
}

修改后的HTML代码 #

<div id="section4">
<section id="contact_area">
<div class="contact_container">
<div id="contact_row_1A">
<div class="contact_column_1">
<div class="contact_content_1A">
<h1>Contact Form</h1>
<div id="contact_row_1B">
<div id="contact_column_2">
<p id="contact_text">Nunc diam leo, fringilla vulputate elit lobortis, consectetur vestibulum quam. Sed id <br> felis ligula. In euismod libero at magna dapibus, in rutrum velit lacinia. <br> Etiam a mi quis arcu varius condimentum.</p>
</div>
</div>
</div>
</div>
</div>
<div id="contact_row_2A">
<form class="contact_form" action="#" method="post">
<div id="contact_column_form_left">
<div class="form_group">
<input class="form_control" id="name_input" name="name" placeholder="Name" type="text">
<!-- 注意：HTML里没有name类型的input，改成text更规范 -->
<input class="form_control" id="email_input" name="email" placeholder="Email" type="email">
<input class="form_control" id="subject_input" name="subject" placeholder="Subject" type="text">
<!-- 同样改成text -->
</div>
</div>
<div id="contact_column_form_right">
<div class="form_group">
<textarea class="form_control" id="comment" name="message" rows="6" placeholder="Your message here..."></textarea>
<button id="contact_btn" type="submit">Send</button>
</div>
</div>
</form>
</div>
</div>
</section>
</div>

关键修改点说明 #

• 改用Flex布局：把#contact_row_2A的display设为flex，用flex:1让左右两列平分空间，再用gap设置列间距，彻底解决重叠问题。
• 盒模型优化：给所有表单控件加上box-sizing: border-box，这样设置的width会包含padding和border，不会超出父容器宽度。
• 去掉固定宽度：把#section4、#contact_area的固定宽度改成100%，用margin:0 auto实现容器居中，让布局更适配不同屏幕。
• 修正HTML细节：把输入框的type="name"改成type="text"，提升代码规范性。

这样修改后，你的输入框组和textarea就能完美并排，不会再重叠啦！

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