添加到购物车按钮都在相同的高度 - Shopify 首次亮相答案

【问题标题】：Add to Cart Button all on same height - Shopify debut添加到购物车按钮都在相同的高度 - Shopify 首次亮相
【发布时间】：2021-04-15 08:31:55
【问题描述】：

所以我在 shoopify 首次亮相的主题中添加了以下代码，以便我可以立即将产品添加到购物车：

<form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input min="1" type="number" id="quantity" name="quantity" value="1" style="width:65px; padding: 9px 10px; vertical-align: top; margin-top:-30px;"/>
  <input type="submit" value="Add to cart" class="btn" style="padding: 10px 10px; vertical-align: top; margin-top:-30px;"/>
</form>

看起来像这样： add to cart button example image

但我不知道如何将这些“添加到购物车”字段设置在同一高度。他们使用上边距来定义他们在产品网格下的位置。但是图像和产品描述的高度和长度并不完全相同，这给了我这些未对齐的按钮。

还有什么方法可以将它们全部对齐在同一高度上吗？

提前感谢您的帮助。

【问题讨论】：

你必须使用 flexbox。使用显示：flex；对齐项目：flex-end；在所有卡片的父包装中。
如果您希望我们为您提供确切的解决方案，请分享您的网站网址。
谢谢。这是网址：discover.snow-pearl.com/collections/alle-produkte
您需要为收藏列表页面上的图像添加最小高度，它们的高度不相等。或使用 JS lib like Match Height
我该如何处理不同的文本长度（1 或 2 行）？另外，当产品打折时，有一个销售徽章可以按下我的“添加到购物车”按钮。

标签： html css forms themes shopify

【解决方案1】：

我找到了一个非常简单的解决方案。我使用了 Mohd Salman 的评论。这为我指出了正确的更正方法，但它没有按预期工作。

于是我在theme.css代码（assets部分）中搜索了父元素，发现如下：

.grid--view-items {
  overflow: auto;
  margin-bottom: -35px; }

然后我添加了一些弹性代码，最终版本如下所示：

.grid--view-items {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  overflow: auto;
  margin-bottom: -35px; }

感谢 Mohd Salman，为我指明了正确的方向。

【讨论】：