我做了一个数量输入框。但是现在-（按钮）左侧和+（按钮）右侧出现在这里。并且输入数量框现在居中。
我的网站截图：
注意：我的要求
但我需要输入数量框左侧和-+（减加按钮）顶部和底部与一个Div（部分）。
你也可以看到下面的截图
怎么可能使用HTML和CSS呢？
null
.wooco-qty, .wooco-qty-input {
display: flex;
align-items: center;
}
.wooco-minus, .wooco-plus {
display: inline-block;
width: 30px;
height: 30px;
line-height: 27px;
text-align: center;
cursor: pointer;
background-color: #fefefe;
border: 1px solid #ddd;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.wooco_component_product .wooco_component_product_qty input {
width: 40px;
text-align: center;
margin: 0;
padding: 0 5px;
height: 30px;
line-height: 38px;
box-shadow: none;
border-width: 1px 0 1px 0;
border-style: solid;
border-color: #ddd;
background-color: #fff;
color: #FFCC00;
-moz-appearance: textfield;
}
input[type="text"], input[type="number"]{
max-width: 500px;
padding: 0 8px;
height: 36px;
-webkit-appearance: none;
-moz-appearance: none;
color: #FFF;
}
input, select, button {
width: 50%;
background-color: #000;
border: 1px solid #FFCC00;
color: #8f8f8f;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}<div class="wooco_component_product_qty wooco-qty">
<span class="wooco-qty-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Qty:</font></font></span>
<span class="wooco-qty-input">
<span class="wooco_component_product_qty_btn wooco_component_product_qty_minus wooco-minus"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">-</font></font></span>
<input class="wooco_component_product_qty_input input-text text qty" type="number" min="1" max="3" step="1" value="1">
<span class="wooco_component_product_qty_btn wooco_component_product_qty_plus wooco-plus"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">+</font></font></span>
</span>
</div>null
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.button-container{
width: 10%;
height: 10%;
display: flex;
}
.button-container input{
justify-content: center;
align-items: center;
}
.buttons{
display: flex;
justify-content: space-between;
flex-direction: column;
}
</style>
</head>
<body>
<div class="button-container">
<p>Qty:</p>
<input type="text" name="">
<div class="buttons">
<button>+</button>
<button>-</button>
</div>
</div>
</body>
</html>
它只是你想要的按钮的一个布局。我希望它能对你有所帮助。
