如何使具有 2 个不同宽度的 2 个不同按钮调整相同的大小

Question

所以我遇到的问题是我有 2 个不同的按钮。其中一个是添加到购物车按钮，另一个是立即购买按钮。我还有一个数量输入，我将其放在添加到购物车按钮旁边。但是由于我的按钮宽度不同，因此它们不会调整相同的大小。我想让我的添加到购物车按钮和我的数量输入一起与我的立即购买按钮的宽度相同，而不会在屏幕变小后我的数量变形。

编辑我网站的 link 是 kuduzovic.myshopify.com 密码是 soltew.

这里是 HTML/Shopify 代码：

        <div class="payment-buttons">
            <div class="cart-cta_wrapper">
                <form method="post" action="/cart/add" style="display: flex;">
                    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
                    <button class="featured-atc">
                        <input type="submit" value="Add to cart" class="atcbtn" />
                    </button>
                    <div class="featured-quantity_wrapper">
                        <span class="minus">-</span>
                        <input type="text" value="1" />
                        <span class="plus">+</span>
                    </div>
                </form>
            </div>
            {% form 'product', product %}
            <div class="buy-now_button">
                {{ form | payment_button }}
            </div>
            {% endform %}
        </div>

这里是 css 按钮和数量：

span {
  cursor: pointer;
}
.minus,
.plus {
  width: 30px;
  height: 44px;
  background: #f2f2f2;
  border-radius: 4px;
  padding: 8px 5px 8px 5px;
  border: 1px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
input {
  height: 44px;
  width: 70px;
  text-align: center;
  font-size: 26px;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
}
button.featured-atc {
  width: 60%;
  background: #db9741;
  border: none;
  height: 44px;
}

.featured-atc input {
  height: 44px;
  background: #db9741;
  width: 100%;
  border: none;
  color: white;
}

.featured-quantity_wrapper {
  padding-left: 7px;
}

.cart-cta_wrapper form {
  display: flex;
}
@media only screen and (max-width: 767px) {
  .shopify-payment-button__button {
    width: 95%;
    background: #db9741;
    border: none;
    height: 44px;
    overflow: hidden;
    display: inline-block;
  }

  .cart-cta_wrapper form {
    display: flex;
  }
  .buy-now_button {
    padding-top: 30px;
    padding-bottom: 10px;
  }
  .payment-buttons {
    text-align: center;
  }
}

Answer 1

所以我发现我做错了什么，事实上我没有让我的添加到购物车按钮的宽度与我的立即购买按钮的宽度相同。我将“立即购买”按钮的宽度设置为 100%，而将“添加到购物车”按钮的宽度设置为 60%（这样数量就合适了）。我应该做的是使用 calc 使我的按钮 100% 减去我的数量的宽度。这样两个按钮都会收缩相同的量，而数量会保持原来的形状。

我之前的代码：

button.featured-atc {
  width: 60%;
  background: #db9741;
  border: none;
  height: 44px;
}

我现在的代码：

button.featured-atc {
  width: calc(100% - 170px);
  background: #db9741;
  border: none;
  height: 44px;
}

如何使具有 2 个不同宽度的 2 个不同按钮调整相同的大小

How to make 2 different buttons with 2 different widths resize the same amount

html

css

button

shopify