如何将HTML表单中的Size、Width、Height字段设置为同行显示

要让Size、Width、Height这三个字段并排显示，我推荐用CSS Flexbox布局——这是目前处理一维排列最灵活、最简洁的方式，完全适配你的需求。下面是具体步骤：

步骤1：包裹目标字段 #

首先，把这三个字段的容器div打包到一个新的父容器里，给它加个自定义类名（比如wccf-inline-fields），方便后续用CSS控制：

<form class="cart" action="https://***********.com/product/stitchcount/" method="post" enctype='multipart/form-data'>
<div id="wccf_product_field_master_container">
<div id="wccf_product_field_design_container" class="wccf_field_container wccf_field_container_product_field wccf_field_container_select wccf_field_container_product_field_select">
<label for="wccf_product_field_design"><span class="wccf_label">Design </span></label>
<select name="wccf[product_field][1376]" id="wccf_product_field_design" class="wccf wccf_product_field wccf_select wccf_product_field_select" style="width: 100%;" data-wccf-quantity-based="1" data-wccf-field-id="1376">
<option value=""></option>
<option value="flat">Flat</option>
<option value="3d">3D</option>
</select>
</div>

<!-- 新增的包裹容器 -->
<div class="wccf-inline-fields">
<div id="wccf_product_field_size_container" class="wccf_field_container wccf_field_container_product_field wccf_field_container_select wccf_field_container_product_field_select">
<label for="wccf_product_field_size"><span class="wccf_label">Size</span>
<abbr class="required" title="required">*</abbr></label>
<select name="wccf[product_field][1249]" id="wccf_product_field_size" class="wccf wccf_product_field wccf_select wccf_product_field_select" style="width: 100%;" data-wccf-quantity-based="1" data-wccf-field-id="1249" data-wccf-required-field="1">
<option value=""></option>
<option value="inch">Inch</option>
<option value="mm">MM</option>
<option value="cm">CM</option>
</select>
</div>
<div id="wccf_product_field_width_container" class="wccf_field_container wccf_field_container_product_field wccf_field_container_text wccf_field_container_product_field_text">
<label for="wccf_product_field_width"><span class="wccf_label">Width</span></label>
<input type="text" name="wccf[product_field][1250]" id="wccf_product_field_width" class="wccf wccf_product_field wccf_text wccf_product_field_text" style="width: 100%;" data-wccf-quantity-based="1" data-wccf-field-id="1250" data-wccf-character-limit="3"><small class="wccf_character_limit" style="display: none;"><span class="wccf_characters_remaining">3</span> characters remaining</small></div>
<div id="wccf_product_field_height_container" class="wccf_field_container wccf_field_container_product_field wccf_field_container_text wccf_field_container_product_field_text">
<label for="wccf_product_field_height"><span class="wccf_label">Height</span></label>
<input type="text" name="wccf[product_field][1251]" id="wccf_product_field_height" class="wccf wccf_product_field wccf_text wccf_product_field_text" style="width: 100%;" data-wccf-quantity-based="1" data-wccf-field-id="1251">
</div>
</div>
<!-- 包裹容器结束 -->

<div id="wccf_product_field_no_colors_container" class="wccf_field_container wccf_field_container_product_field wccf_field_container_text wccf_field_container_product_field_text">
<label for="wccf_product_field_no_colors"><span class="wccf_label"># of Colors</span></label>
<input type="text" name="wccf[product_field][1378]" id="wccf_product_field_no_colors" class="wccf wccf_product_field wccf_text wccf_product_field_text" style="width: 100%;" placeholder="# of Colors" data-wccf-quantity-based="1" data-wccf-field-id="1378">
</div>
<div id="wccf_product_field_sewn_on_container" class="wccf_field_container wccf_field_container_product_field wccf_field_container_select wccf_field_container_product_field_select">
<label for="wccf_product_field_sewn_on"><span class="wccf_label">Design to be sewn on</span></label>
<select name="wccf[product_field][1377]" id="wccf_product_field_sewn_on" class="wccf wccf_product_field wccf_select wccf_product_field_select" style="width: 100%;" data-wccf-quantity-based="1" data-wccf-field-id="1377">
<option value=""></option>
<option value="flat_goods">Flat Surface (hoop or flatbed) </option>
<option value="fineshed_caps">Finished Caps</option>
</select>
</div>
<div id="wccf_product_field_placement_container" class="wccf_field_container wccf_field_container_product_field wccf_field_container_text wccf_field_container_product_field_text">
<label for="wccf_product_field_placement"><span class="wccf_label">Placement</span></label>
<input type="text" name="wccf[product_field][1375]" id="wccf_product_field_placement" class="wccf wccf_product_field wccf_text wccf_product_field_text" style="width: 100%;" data-wccf-quantity-based="1" data-wccf-field-id="1375">
<small>(hat,left chest, full back, etc.)</small></div>
<div id="wccf_product_field_fabric_container" class="wccf_field_container wccf_field_container_product_field wccf_field_container_text wccf_field_container_product_field_text">
<label for="wccf_product_field_fabric"><span class="wccf_label">Type of Fabric</span></label>
<input type="text" name="wccf[product_field][1374]" id="wccf_product_field_fabric" class="wccf wccf_product_field wccf_text wccf_product_field_text" style="width: 100%;" data-wccf-quantity-based="1" data-wccf-field-id="1374">
</div>
<div id="wccf_product_field_format_container" class="wccf_field_container wccf_field_container_product_field wccf_field_container_text wccf_field_container_product_field_text">
<label for="wccf_product_field_format"><span class="wccf_label">Required Format</span></label>
<input type="text" name="wccf[product_field][1373]" id="wccf_product_field_format" class="wccf wccf_product_field wccf_text wccf_product_field_text" style="100% width;" data-wccf-quantity-based="1" data-wccf-field-id="1373">
<small>(DST,PES,HUS,JEF,NGS,EMB, etc)</small></div>
<div id="wccf_product_field_instructions_container" class="wccf_field_container wccf_field_container_product_field wccf_field_container_textarea wccf_field_container_product_field_textarea">
<label for="wccf_product_field_instructions"><span class="wccf_label">Instructions</span></label>
<textarea name="wccf[product_field][1252]" id="wccf_product_field_instructions" class="wccf wccf_product_field wccf_textarea wccf_product_field_textarea" style="100% width;" data-wccf-quantity-based="1" data-wccf-field-id="1252"></textarea>
</div>
<div id="wccf_product_field_upload_container" class="wccf_field_container wccf_field_container_product_field wccf_field_container_file wccf_field_container_product_field_file">
<label for="wccf_product_field_upload"><span class="wccf_label">Upload </span></label>
<input type="hidden" name="wccf_ignore[product_field][1253]" id="_wccf_product_field_upload" value="">
<input type="file" name="wccf_ignore[product_field][1253]" id="wccf_product_field_upload" class="wccf wccf_product_field wccf_file wccf_product_field_file" data-wccf-quantity-based="1" data-wccf-field-id="1253">
</div>
</div>
<div class="quantity">
<label class="screen-reader-text" for="quantity_5e32d067d8b8f">Stitch Count quantity</label>
<input type="number" id="quantity_5e32d067d8b8f" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" inputmode="numeric" />
</div>
<button type="submit" name="add-to-cart" value="230" class="single_add_to_cart_button button alt">Add to cart</button>
</form>

步骤2：添加Flexbox CSS样式 #

接下来，添加以下CSS代码来实现横向排列。你可以把这段代码放到主题的自定义CSS面板、子主题的style.css文件里，或者通过插件添加自定义CSS：

/* 让包裹容器变成弹性布局 */
.wccf-inline-fields {
  display: flex;
  gap: 1.5rem; /* 控制三个字段之间的间距，可根据需求调整 */
  flex-wrap: wrap; /* 当屏幕宽度不够时，自动换行，保证移动端可用性 */
  margin: 1rem 0; /* 上下添加间距，和其他字段区分开 */
}

/* 让每个字段容器平分可用空间 */
.wccf-inline-fields .wccf_field_container {
  flex: 1;
  min-width: 160px; /* 设置最小宽度，避免字段在小屏幕上太拥挤 */
}

/* 确保输入框/下拉框填满容器宽度 */
.wccf-inline-fields select,
.wccf-inline-fields input[type="text"] {
  width: 100% !important; /* 覆盖原有的内联样式，确保宽度自适应 */
}

/* 让标签单独占一行，保持布局清晰 */
.wccf-inline-fields .wccf_label {
  display: block;
  margin-bottom: 0.5rem;
}

为什么用Flexbox？ #

• 简单灵活：几行代码就能实现横向排列，不需要复杂的浮动或定位。
• 响应式友好：通过flex-wrap: wrap，在手机等小屏幕上字段会自动垂直排列，不会出现布局错乱。
• 易于维护：后续如果要调整间距、宽度，只需要修改CSS即可，不用动HTML结构。

如果你的表单是用WooCommerce自定义字段插件生成的，这种方法也不会破坏插件的原有功能，只是调整了布局样式。

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