同一行上的Woocommerce签出字段

Question

我试图定制Woocommerce结账页面文本框。具体来说，我想在同一行上设置一些文本框，而不是单独的。我只试着用css来处理float属性，但是我不知道我错过了什么。这就是我想做的..。

• 城市和邮编在同一线路上
• 同一线路上的电话和电子邮件地址
• 文本框应与“名”和“姓”文本框大小相同

Answer 1

使用自定义样式编辑器为下面的类和ID添加自定义CSS

.woocommerce-billing-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.woocommerce form .form-row {
  display: inline-block;
}
.woocommerce form .form-row input.input-text {
  max-width: 252px;
}
#billing_first_name_field {
  order: 1;
}
#billing_last_name_field {
 order: 2;
}
#billing_company_field {
  order: 3;
}
#billing_country_field {
  order: 4;
}
#billing_address_1_field {
  order: 5;
}
#billing_address_2_field {
  order: 6;
  width: 100%;
}
#billing_city_field {
  order: 7;
}
#billing_postcode_field {
  order: 8;
}
#billing_state_field {
  order: 9;
  width:100%;
}
#billing_phone_field {
  order: 10;
}
#billing_email_field {
  order: 11;
}