如何实现表单内元素并排：姓名邮箱电话与消息框按钮布局调整

问题分析 #

当前代码未构建左右分栏结构，所有表单元素垂直堆叠。要实现姓名、邮箱、电话字段与消息框+按钮并排，需用Flexbox创建左右两个列容器，分别放置对应元素。

修改后的代码 #

HTML结构调整

将表单元素分为左右两组，明确布局结构：

<main>
  <article>
    <div class="full_form">
      <div class="form_contact">
        <h4>Student project</h4>
        <form id="form_itself_id" class="form_itself_class">
          <!-- 左侧输入组：姓名、邮箱、电话 -->
          <div class="form_left_column">
            <div class="form_element_group">
              <label for="name" class="label_group">Name*</label>
              <div class="form_input_group">
                <input type="text" id="name" name="name" class="form_controls" placeholder="Enter your name" required>
              </div>
            </div>
            <div class="form_element_group">
              <label for="email" class="label_group">Email*</label>
              <div class="form_input_group">
                <input type="email" id="email" name="email" class="form_controls" placeholder="Enter your Email" required>
              </div>
            </div>
            <div class="form_element_group">
              <label for="phonenumber" class="label_group">Phone*</label>
              <div class="form_input_group">
                <input type="number" id="phonenumber" name="phonenumber" class="form_controls" placeholder="Phone Number" required>
              </div>
            </div>
          </div>

          <!-- 右侧输入组：消息框、提交按钮 -->
          <div class="form_right_column">
            <div class="form_element_group">
              <label for="message" class="label_group">Message*</label>
              <div class="form_input_group">
                <textarea id="message" name="message" class="form_controls" rows="6" maxlength="400" placeholder="Write your message" required></textarea>
              </div>
            </div>
            <div class="form_element_group">
              <button type="submit" id="form_button" class="">Submit Request</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </article>
</main>

CSS样式修改

用Flexbox实现分栏，调整元素适配布局：

.full_form {
  display: block;
}

.form_contact {
  margin: 10.4%;
  border: 1px solid black;
  box-shadow: 0px 0px 20px 3px black;
  max-width: 100%;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  padding: 2% 12% 10px;
  border-radius: 0.25rem;
}

.form_itself_class {
  /* 核心：Flexbox创建左右分栏 */
  display: flex;
  gap: 2rem; /* 左右栏间距 */
}

.form_left_column, .form_right_column {
  flex: 1; /* 两栏宽度均等分配 */
}

.form_element_group {
  margin-bottom: 1rem;
}

.form_controls {
  width: 100%; /* 输入框填满容器宽度 */
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.275rem 1.95rem;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.5;
  color: #b0729e;
  background-color: rgb(67, 41, 41);
  background-clip: padding-box;
  border: 1px solid #59383b;
  outline: none;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form_contact #message {
  padding: 2.275rem 2.95rem;
  height: auto; /* 自适应文本域高度 */
}

#form_button {
  padding: 0.5rem 1.5rem;
  background-color: #b0729e;
  color: white;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

.label_group {
  color: white;
  display: block;
  margin-bottom: 0.5rem;
}

h4 {
  font-size: 40px;
  color: white;
  margin-bottom: 1.5rem;
}

关键修改点 #

• 表单添加display: flex，构建左右分栏基础
• 分组容器设置flex:1，实现两栏宽度均等
• 移除冗余float属性，Flexbox自动处理布局
• 输入框宽度设为100%，适配所在栏宽度
• 增加gap属性控制栏间距，提升布局美观度

内容的提问来源于stack exchange，提问作者Euclid-bytes