网上商店需要添加到购物车按钮对齐

Question

在我商店的首页上，我的产品 add to cart 按钮没有对齐。

看这张图

对此的解决方法是缩短标题或使每个标题都在 2 行上，但这会给我的 category pages 带来更多问题。

有没有办法在首页这里解决这个问题？

Answer 1

选项 #1：在您的 li.product 上设置 position: relative 和可选的 min-height，并在您的 [添加到购物车] 上设置 position: absolute 和 bottom: 0主题 CSS 中的按钮。请注意，您的主题可能使用不同的 classes/IDs。如果我使用的那些不起作用，您需要检查浏览器的 inspector tools 以查看将哪个用于您的主题：

li.product {
  position: relative;
  min-height: 400px; // you may or may not need to set the height 
}

li.product a.button {
  position: absolute;
  left: 0; // combined with right: 0, will center the button
  right: 0; // combined with left: 0, will center the button
  bottom: 0;
}

选项 #2：在您的产品标题上设置 min-height（例如，h2）

li.product h2 {
  min-height: 100px; // Adjust to account for your shop's product with the longest title
}

网上商店需要添加到购物车按钮对齐

Add to cart button alignment needed on webshop

php

woocommerce

webshop