下拉選擇器中的內容對齊

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> 

我已經用下面的方式對它們進行了樣式設計，並且我已經用精靈圖像改變了選擇器中的箭頭。

.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>

Answer 2

請檢查一下。我不明白我是對的還是錯的。

.formBox{ 
 
    display: block; 
 
} 
 
label, 
 
select{ 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
select{ 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    background-attachment: scroll; 
 
    background-color: #ffffff; 
 
    background-image: url(http://rgb.vn/ideas/wp-content/themes/rgb2014/images/iconArrow_on.png); 
 
    background-position: right 15px center; 
 
    background-repeat: no-repeat; 
 
    background-size: 20px 20px; 
 
    border: 1px solid #cccccc; 
 
    height: 34px; 
 
    padding: 6px 12px; 
 
    text-align: center; 
 
    width: 200px; 
 
} 
 
select option{ 
 
    padding: 4px 0; /* Firefox only */ 
 
}

<div class="formBox"> 
 
    <label>Quantity:</label> 
 
    <select> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
    </select> 
 
</div>