html - Div 不会响应

Question

当屏幕足够宽时，我只是想在 #plusmin 旁边使用 ID #knop 的 div。当屏幕变得小于 #knop 时，必须在 Plusmin 下...

我在 CSS 中尝试了各种显示选项都没有效果...

参见页面:https://www.tricotstoffen.nl/tricot-stoffen/dierenprint/stenzo-tricot-konijnen-zwart-wit-bio-katoen.html

<div class="product-add-form">
<form action="https://www.tricotstoffen.nl/checkout/cart/add/uenc/aHR0cHM6Ly93d3cudHJpY290c3RvZmZlbi5ubC90cmljb3Qtc3RvZmZlbi9kaWVyZW5wcmludC9zdGVuem8tdHJpY290LWtvbmlqbmVuLXp3YXJ0LXdpdC1iaW8ta2F0b2VuLmh0bWw,/product/324/" method="post"
      id="product_addtocart_form">
    <input type="hidden" name="product" value="324" />
    <input type="hidden" name="selected_configurable_option" value="" />
    <input type="hidden" name="related_product" id="related-products-field" value="" />
    <input name="form_key" type="hidden" value="xmAH6XJ8Kvrn2FTs" />                            <style type="text/css">
#box{
    width: 100%;
    min-height: 55px;
    display: inline-table;
}

#plusmin{
    width: 210px;
    height: 55px;
    float: left;
    padding-left: 3px;
    margin-bottom:10px;
}
#knop{
    height: 55px;
    width: 175px;
    float: left;
}

</style>
<div class="box-tocart" id="box">
<div class="fieldset">
            <div class="field qty" id="plusmin">
        <label class="label" for="qty"><span>Aantal</span></label>
<div class="control" data-bind="scope: 'qty_change'">

<button data-bind="click: decreaseQty">-</button>

<input  data-bind="value: qty()"
        type="number"
        name="qty"
        id="qty"
        maxlength="12"
        title="Aantal" class="input-text qty"
        data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:0.5}}"
    />
<button data-bind="click: increaseQty">+</button>
</div>
<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "qty_change": {
                    "component": "Jilco_plusminknoppen/js/view/product/view/qty_change",
                    "defaultQty": 0.5                    }
             }
        }
    }
}
</script>


    </div>
            <div class="actions" id="knop">
        <button type="submit"
                title="In Winkelwagen"
                class="action primary tocart"
                id="product-addtocart-button">
            <span>In winkelwagen</span>
        </button>
                </div>
</div>
</div>
<script type="text/x-magento-init">
{
    "#product_addtocart_form": {
        "Magento_Catalog/product/view/validation": {
            "radioCheckboxClosest": ".nested"
        }
    }
}
</script>

                </form>
</div>

Answer 1

div#plusmin 在您提供的示例页面上有一个内联样式属性，这可能是由一些 magento javascript 设置的。您可以在浏览器开发控制台中看到它:

<div class="field qty" id="plusmin" style="width: 100%; display: block;">
   ...
</div>

这把你搞砸了，因为内联样式属性规则优先于 css 样式规则。作为快速修复，您可以附加设置 div 宽度的 css 规则 !important。此类规则不能被样式属性规则覆盖。

#plusmin{
    width: 210px !important;
    ...
}