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;
    }