Question

所以我在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

但我不知道如何将这些“添加到购物车”字段都设置在相同的高度。他们使用 top-margin 来定义他们在产品网格下的位置。但图片和产品描述的高度和长度不尽相同，这给了我这些未对齐的按钮。

还有什么方法可以将它们全部对齐到相同的高度吗？

提前感谢您的帮助。

Answer 1

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

于是我搜索了theme.css代码（assets部分）中的父元素，找到了如下一个：

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

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

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

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

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

1 个答案: