如何通过CSS重排元素，实现Add to Cart按钮居左、下拉选择框居右

可以通过CSS的flex布局特性实现，不需要修改原有HTML结构，两种常用实现方案如下：

方案1：flex方向反转（最简实现） #

给包裹数量选择框和加购按钮的.quantity容器设置flex布局，直接反转行排列方向即可：

.archive .woocommerce-variation-add-to-cart .quantity {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 8px; /* 可自定义两个元素之间的间距 */
}

方案2：order属性自定义顺序（灵活性更高） #

通过order属性单独指定每个元素的排列优先级，数字越小排列位置越靠前，后续如果新增元素也可以灵活调整顺序：

/* 先给父容器设置flex布局 */
.archive .woocommerce-variation-add-to-cart .quantity {
  display: inline-flex;
  gap: 8px;
}
/* 加购按钮优先级更高，排在前面 */
.archive .single_add_to_cart_button {
  order: 1;
}
/* 数量下拉框优先级更低，排在后面 */
.archive .quantity select[name="quantity"] {
  order: 2;
}

注意：两种方案仅调整视觉展示顺序，不会影响表单提交、点击交互等原有功能。如果你需要全站所有商品页都应用这个效果，去掉选择器最前面的.archive限定符即可。

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