如何使用 css 将下拉菜单移动到“添加到购物车”按钮下方？答案

【问题标题】：How can I move dropdown below the “add to cart” button using css?如何使用 css 将下拉菜单移动到“添加到购物车”按钮下方？
【发布时间】：2020-05-04 19:22:45
【问题描述】：

我正在使用表格插件来展示我的产品。

我正在尝试重新排列下拉产品插件和“添加到购物车”的顺序

如果我只是重新排序 div，就足够了吗？

我应该在 woocommerce 或表格插件中重新排列吗？我还是个初学者，正在努力学习这一切。

<form class="cart" action="https://connect.coffee/product/luna/" method="post" enctype="multipart/form-data">

    <div class="wc-pao-addon wc-pao-addon-include-sample wc-pao-required-addon multiple_choice select no-labels">

        <p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-5659-include-sample-0">
        <select class="wc-pao-addon-field wc-pao-addon-select" name="addon-5659-include-sample-0" required="">

            <option value="">Include Sample</option>

                        <option data-raw-price="" data-price="" data-price-type="flat_fee" value="roasted-1" data-label="Roasted (+$)">Roasted (+$) </option>
                        <option data-raw-price="" data-price="" data-price-type="flat_fee" value="green-2" data-label="Green (+$)">Green (+$) </option>
                        <option data-raw-price="" data-price="" data-price-type="flat_fee" value="no-3" data-label="No">No </option>

        </select>
        </p>

        <div class="clear"></div>
    </div>
    <div id="product-addons-total" data-show-sub-total="0" data-type="simple" data-tax-mode="excl" data-tax-display-mode="excl" data-price="1008.7" data-raw-price="1008.7" data-product-id="5659"></div><div class="add-to-cart-button">
        <div class="quantity">
            <label class="screen-reader-text" for="quantity_5eafc467ac4a6">Luna quantity</label>
            <input type="number" id="quantity_5eafc467ac4a6" class="input-text qty text" step="1" min="1" max="80" name="quantity" value="1" title="Qty" size="4" placeholder="" inputmode="numeric">
        </div>

        <button type="submit" name="add-to-cart" value="5659" class="single_add_to_cart_button button alt">Add to order</button>

    </div>

</form>

【问题讨论】：

当然这取决于你使用的插件以及它是如何构建的。通常它将包含一个模板文件，您可以安全地覆盖它（这样它就不会被插件更新覆盖）。真的不建议修改core文件。

标签： php css wordpress woocommerce

【解决方案1】：

您可以在 #product-addons-total 元素上使用 CSS flexbox 属性，并颠倒子元素的顺序。

#product-addons-total {
    display: flex;
    flex-direction: column-reverse;
}

记住供应商前缀。

【讨论】：