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

Question

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

看这张照片

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

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

Answer 1

选项#1：在您的li.product 上设置position: relative 和可选的min-height，并在您的主题CSS 中的[添加到购物车] 按钮上设置position: absolute 和bottom: 0。请注意，您的主题可能使用不同的类/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
}