技术求助：如何实现数量选择框与加入购物车按钮inline显示？

直接CSS调整方案 #

针对这类电商产品页的布局问题，可通过以下CSS规则强制让两个元素处于同一行：

/* 让数量框和加购按钮本身改为行内弹性布局 */
.quantity, .single_add_to_cart_button {
    display: inline-flex !important;
    vertical-align: middle;
    margin-right: 8px; /* 可选：添加间距避免元素紧贴 */
}

/* 调整父容器布局，防止内部元素换行 */
div.product form.cart {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

关键排查方向 #

• 检查父容器限制：如果数量框和按钮的父元素设置了width: 100%或强制换行的规则，需要先调整父容器的display属性（比如改为flex或inline-block）。
• 验证CSS优先级：用浏览器开发者工具（F12）定位元素，查看当前生效的display规则，若有更高优先级的样式覆盖，可通过增加选择器层级（比如body .quantity）来提升自定义规则的权重。
• 清除默认样式：部分浏览器或插件会给表单元素添加默认的block属性，需确保自定义规则完全覆盖这些默认样式。

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