如何使用CSS实现main_support1类div内部元素的inline行内排列

首先调整HTML代码，删除两个<label>标签之间的强制换行标签<br>，修改后的结构参考：

<div class="main_support1">
  <label> Full name *<br>
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Enter Your Full Name *"></span>
  </label>
  <label> Email Address *<br>
    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Enter Your Email Address *"></span>
  </label>
</div>

再添加对应的CSS样式即可实现行内排列，以下是两种常用实现方案：

方案1：inline-block实现 #

/* 控制每个label为行内块元素，支持设置宽高 */
.main_support1 label {
  display: inline-block;
  width: 48%;
  margin-right: 2%;
  vertical-align: top; /* 保证两个表单项顶部对齐 */
}
/* 清除最后一个label的右边距 */
.main_support1 label:last-of-type {
  margin-right: 0;
}
/* 输入框自适应label宽度，避免溢出 */
.main_support1 input {
  max-width: 100%;
  box-sizing: border-box;
}

方案2：flex布局实现（更推荐，适配性更强） #

/* 父容器开启flex布局 */
.main_support1 {
  display: flex;
  gap: 16px; /* 自定义两个表单项之间的间距 */
  flex-wrap: wrap; /* 小屏幕宽度不足时自动换行，不需要可删除 */
}
/* 两个表单项平分父容器宽度，也可自定义固定宽度 */
.main_support1 label {
  flex: 1;
  min-width: 280px; /* 配合flex-wrap使用，设置表单项最小宽度，不需要可删除 */
}
/* 输入框自适应label宽度，避免溢出 */
.main_support1 input {
  max-width: 100%;
  box-sizing: border-box;
}

如果调整后仍存在换行问题，可通过浏览器开发者工具的元素检查面板，确认父容器.main_support1的宽度是否足够、是否有其他全局样式覆盖了自定义样式。

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