如何添加CSS或修改代码让垂直排列的支付表单字段横向并排

你不需要大幅修改现有短代码结构，只需要添加分组容器和对应CSS样式即可实现需求，具体操作如下：

步骤1：调整短代码结构，给需要并排的字段分组 #

将需要放在同一行显示的表单字段包裹在同一个自定义class的div容器中，调整后的短代码示例如下：

<div class="form-row">
[text name="Text Title"]
[text name="Full Name" required="required" ]
</div>

<div class="form-row">
[text name="Phone Number"]
[datepicker name="Datepicker Title"]
</div>

<div class="form-row">
[select name="State" options="Abia,Adamawa,Akwa Ibom,Anambra,Bauchi,Bayelsa,Benue,Borno,Cross River,Delta,Ebonyi,Edo,Ekiti,Enugu,FCT,Gombe,Imo,Jigawa,Kaduna,Kano,Katsina,Kebbi,Kogi,Kwara,Lagos,Nasarawa,Niger,Ogun,Ondo,Osun,Oyo,Plateau,Rivers,Sokoto,Taraba,Yobe,Zamfara"]
</div>

如果你需要3个字段并排，只需要把3个对应的短代码放到同一个.form-row容器中即可。

步骤2：添加自定义CSS样式 #

把以下CSS代码添加到你网站的自定义CSS配置入口（一般主题设置、自定义外观面板中都有对应入口）：

/* 表单行容器，开启弹性布局 */
.form-row {
  display: flex;
  gap: 20px; /* 同行字段之间的横向间距，可自行调整数值 */
  margin-bottom: 16px; /* 不同行之间的纵向间距，可自行调整数值 */
  flex-wrap: wrap; /* 小屏幕下自动换行，避免移动端溢出 */
}

/* 表单字段默认宽度分配 */
.form-row > * {
  flex: 1; /* 同行字段默认平均分配宽度 */
  min-width: 240px; /* 字段最小宽度，小于这个宽度自动换行，适配移动端 */
}

可选扩展配置 #

• 如果需要某行内的字段按比例分配宽度，比如一个占2/3，另一个占1/3，可以单独给字段加自定义类，示例：

  <div class="form-row">
    <div class="form-col-2">[text name="Text Title"]</div>
    <div class="form-col-1">[text name="Full Name" required="required" ]</div>
  </div>
  

  对应补充CSS：

  .form-col-2 { flex: 2; }
  .form-col-1 { flex: 1; }
  

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