WooCommerce店面抬头购物车：使下拉购物车的内容变宽并放到左侧（右对齐）

Question

我在我的网站上使用WooCommerce店面。我希望页眉购物车下拉菜单的内容变宽并放到左侧（右对齐）。由于我的标题购物车位于屏幕的右上角，因此下拉菜单中的内容的一半消失在屏幕的右侧。如何使购物车中的物品落到左侧？

我尝试了以下操作：

CSS：

.site-header-cart .widget_shopping_cart {
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 999999;
    font-size: .875em;
    left: -999em;
    display: block;
}

我的更改：

.site-header-cart .widget_shopping_cart {
    position: absolute;
    top: 100%;
    width: 300px;
    z-index: 999999;
    font-size: .875em;
    left: -999em;
    display: block;
        right: 0;
}

但无济于事。仍然没有一半的购物车内容显示在下面的屏幕截图中。

Answer 1

删除您的css，无需绝对位置已经存在的

.site-header-cart.focus .widget_shopping_cart, .site-header-cart:hover .widget_shopping_cart {
    left: 0px;
    display: block;
}

这是店面微型购物车的标准CSS，因为您会看到左侧设置为0，这意味着它将始终偏离顶部顶部的左侧边缘

项目，以便将-减去左侧定位为

   .site-header-cart.focus .widget_shopping_cart, .site-header-cart:hover .widget_shopping_cart {
        left: -120px;
        display: block;
    }