在 WooCommerce 商店页面中将 "add to cart" 个按钮对齐成一条直线

Question

请指导我把所有的"add to basket buttons"都拉成直线。目前不成比例。

如果有人能帮我提供一个快速代码？

如何在 WooCommerce 商店页面中将 "add to cart" 按钮对齐成一条直线？

Answer 1

产品名称（或标题）以这种方式嵌入到标签中：

<h2 class="woocommerce-loop-product__title">Product title</h2>

因此您需要为 class 定义 min-height css 规则，选择产品名称的最大高度。所以如果最大的产品名称高度是 96 像素，你将这样设置你的规则（例如）：

.woocommerce-loop-product__title {
    min-height: 100px;
    /* OR
    min-height: 100px !important; */
}

您应该将此 css 规则添加到您的活动 child 主题（或活动主题）的 style.css 文件中。

Answer 2

您可以使用 flexbox，然后在按钮上使用魔法 margin-top: auto。您可以忽略 .items 容器上的 display: grid。仅用于列。

.items{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}
.item{
  display: flex;
  flex-direction: column;
}
.item button{
  margin-top: auto;
}

<div class="items">
  <div class="item">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
    <button>Add</button>
  </div>
  <div class="item">
    <p>Lorem ipsum dolor sit amet, consetetur  </p>
    <button>Add</button>
  </div>
  <div class="item">
    <p>Lorem ipsum dolor sit amet </p>
    <button>Add</button>
  </div>
</div>

关于 flexbox 的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在 WooCommerce 商店页面中将 "add to cart" 个按钮对齐成一条直线

Align "add to cart" buttons in a straight line in WooCommerce shop page

css

wordpress

height

product

woocommerce