html - 尝试使用 CSS 定位 PayPal 按钮

Question

我正在尝试将 PayPal 按钮直接放置在我商店的“添加到购物车”按钮下方。我使用的是未完全与 PayPal 集成的 Squarespace，因此我必须在外部生成按钮并将它们放在页面上的“附加信息” block 中，不幸的是，这会将它推到产品图片下方。我试过调整 CSS 使整个 block 位于“添加到购物车”按钮下方，但它在移动设备上无法正确显示。

我试图在其中一个页面上执行此操作: https://jessica-oakes-gdrz.squarespace.com/shop/headbands

Answer 1

您可以将按钮包裹在一个 div 中，如下所示:

<div class="paypalbutton">
<a class="checkoutbutton" href="#more-info">Add to PayPal Cart</a>
</div>

然后使用下面的 CSS。桌面浏览器左对齐，并在 768px 或类似位置设置断点，然后设置居中对齐以用于移动显示。

.paypalbutton{
    text-align:left;
}

@media screen and (min-width:341px) and (max-width:768px) {
    .paypalbutton {
        text-align:center;

    }

}

希望对您有所帮助。K