购物车“添加到购物车”按钮样式问题

Question

我在理解这里发生的事情时遇到了一些困难：

绿色和悬停效果将应用于产品列表页面上的“添加到购物车”按钮

http://www.jkadengeart.com/gallery/

但未应用于单个商品页面上的“添加到购物车”按钮

http://www.jkadengeart.com/gallery/p...n-prints-only/

另外，当我浮动时：向左，按钮仍然保持齐平。

非常感谢您的帮助。

Answer 1

请像这样添加below selector position:absolute;

<强> CSS

    #mp_product_list input.mp_button_addcart {
        margin: 0 0 50px;
        position: absolute;
    }
.mp_grid .mp_product_detail {

    margin-top: 63px;
    vertical-align: top;
}

Answer 2

第01期

在图库页面中，您为#mp_product_list input.mp_button_addcart提供了绿色的颜色 但single页面中没有相同ID的div。

因此，添加或删除ID

像

input.mp_button_addcart {
...
}

或

#mp_product_list input.mp_button_addcart, 
#single_container input.mp_button_addcart {
    ...
}

第02期

由于您已将float:right提供给form

，因此左侧浮动无效

form.mp_buy_form {
float: right;
}

将其更改为left

form.mp_buy_form {
float: left;
}