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

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代码（资产部分）中的父元素，找到了以下一个：

.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 首次亮相

Add to Cart Button all on same height - Shopify debut

html

css

forms

themes

shopify