我有以下小提琴：https ://jsfiddle.net/uosLke60/
我希望輸入按鈕在數量選擇器下方居中。我怎樣才能做到這一點？
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
border: none;
font: inherit;
cursor: pointer;
font-size: 13px;
margin-bottom: 40px;
width: 120px;
-webkit-appearance: none;
border-radius: 0;
}<div class="Product_Card_Button">
<form method="post" action="/cart/add">
<quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;">
<button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
<button class="quantity__button no-js-hidden" name="plus" type="button"> </button>
</quantity-input>
<br>
<input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
</form>
</div>感謝您的輸入。
uj5u.com熱心網友回復：
你必須改變一些事情。
注意：我的一些更改不是像 using 那樣的好習慣!important，但我不得不使用它，因為它沒有改變，所以我不得不在那里強制覆寫。
.Product_Card_Button {
width: fit-content;
}
quantity-input {
display: block !important;
width: 100% !important;
}
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
border: none;
font: inherit;
cursor: pointer;
font-size: 13px;
margin-bottom: 40px;
width: 120px;
-webkit-appearance: none;
border-radius: 0;
padding: 5px 0px;
}
.quantity-form {
display: flex;
flex-direction: column;
align-items: center;
width: fit-content;
}
.quantity-form > quantity-input {
height: 100%;
}<div class="Product_Card_Button">
<form method="post" action="/cart/add" class="quantity-form">
<div>
<quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;">
<button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
<button class="quantity__button no-js-hidden" name="plus" type="button"> </button>
</quantity-input>
</div>
<br>
<input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
</form>
</div>在這種方法中，我決定使用 flexbox，因為它是對齊專案的最簡單方法，我也必須更改寬度，否則它不會真正對齊到中心。
uj5u.com熱心網友回復：
**Remove "display: inline-flex;"**
<style>
form{text-align: center;}
quantity-input.quantity {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
****Another solution****
quantity-input.quantity {
width: max-content !important;
}
</style>
uj5u.com熱心網友回復：
您可以在表單上使用width:fit-content和。text-align: center
請注意，該按鈕在表單中居中，但由于type="number"右側添加了按鈕（在 html 數字輸入中居中文本），因此與輸入值無關。
form{
width:fit-content;
text-align: center;
border:1px solid black;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
opacity: 1;
}
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
cursor: pointer;
font-size: 13px;
width: 120px;
}
input{
text-align: center;
}<form method="post" action="/cart/add">
<div class="quantity">
<button> - </button>
<input type="number" name="quantity" id="quantity" min="1" value="1">
<button> </button>
</div>
<br>
<input type="submit" class="Add_To_Cart_Button" />
</form>uj5u.com熱心網友回復：
在這里，無需更改 CSS，只需添加一些，例如網格系統 / flexbox：
演示
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
border: none;
font: inherit;
cursor: pointer;
font-size: 13px;
margin-bottom: 40px;
width: 120px;
-webkit-appearance: none;
border-radius: 0;
}
/* ADDED */
quantity-input{
flex-wrap: wrap;
}
button{
flex: 1 0 50%;
max-width: 100%;
order: 2;
margin: auto;
}
#quantity{
flex: 0 0 100%;
order: 1;
max-width: calc(100% - 8px);
}<div class="Product_Card_Button">
<form method="post" action="/cart/add">
<quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;">
<button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
<button class="quantity__button no-js-hidden" name="plus" type="button"> </button>
</quantity-input>
<br>
<input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
</form>
</div>uj5u.com熱心網友回復：
您只需要更改您的display: inline-block，將寬度更改為 100% 并添加一個text-align: center;，它應該可以作業
uj5u.com熱心網友回復：
添加text-align: center到表格中。https://jsfiddle.net/211368e/8vkLzg6c/9/
input.Add_To_Cart_Button {
background-color: #000;
color: #fff;
border: none;
font: inherit;
cursor: pointer;
font-size: 13px;
margin-bottom: 40px;
width: 120px;
-webkit-appearance: none;
border-radius: 0;
}
form{
text-align: center;
}
quantity-input.quantity {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}<div class="Product_Card_Button">
<form method="post" action="/cart/add">
<quantity-input class="quantity" style="min-width: 50vw; min-height: 25.4px; display: inline-flex">
<button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
<input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
<button class="quantity__button no-js-hidden" name="plus" type="button"> </button>
</quantity-input>
<br>
<input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
</form>
</div>uj5u.com熱心網友回復：
替換margin-bottom: 40px;為margin: 0 0 40px 40px;
這種方式，您將在按鈕的左側和底部添加 40px 的邊距
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/487481.html