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

Question

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

查看这张图片

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

有没有办法在首页上对此进行修复？

Answer 1

选项1：在position: relative上设置min-height和li.product，并在[添加到购物车]按钮中分别设置position: absolute和bottom: 0您主题的CSS。请注意，您的主题可能使用了不同的类/ ID。如果我使用的主题无效，则需要使用浏览器的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
}