html - 下拉选择器中的内容对齐

Question

我创建了一个下拉选择器来选择合适的产品数量。

<div class="newSelectQty" style="display: inline-block; vertical-align: middle; line-height: 1;">
                <select id="quantitySelector" class="quantityWrapper">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
            </div>

我按照下面的方式设置了它们的样式，并且我用 sprite 图像更改了选择器中的箭头。

.newSelectQty select{
background: transparent url(../img/sprite.png) no-repeat right center;
background-position: 0 -35px; width: 30px;
width: 75px;
text-align: center;
color:#777777;
font-size: 13px;
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height:25px; }

结果是这样的:

如何使箭头与右侧对齐，而值 (1,2,3,4,5) 的右侧可以有一些空格，使其不会太靠近左边框？以及如何将中心的选择器框与“数量”一词对齐？太感谢了!

Answer 1

很简单，检查这个。

#selectbox{
margin:0 auto;
text-align:center;  
width:auto; 
height:25px; 
}
.newSelectQty select{
background:url(http://s30.postimg.org/simmn8cg1/down_arrow.png) no-repeat right;
width: 75px;
text-align: center;
padding-left:10px;
color:#777777;
font-size: 13px;
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height:25px; 
-webkit-appearance: none;
background-position-x: 50px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
.newSelectQty option{
text-indent:10px; 
}
.qnt{
margin-right:5px;
text-transform:uppercase;
font-size: 16px;
}

<div id="selectbox">
<label class="qnt">Quantity</label>
<div class="newSelectQty" style="display: inline-block; vertical-align: middle; line-height: 1;">
<select id="quantitySelector" class="quantityWrapper">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>