選擇選項相同的寬度

Question

http://jsfiddle.net/73vbu0kg/

select { 
    -moz-appearance: none; 
    border: 1px solid #333; 
    color: #999; 
    display: inline-block; 
    font-size: 12px; 
    height: 39px; 
    padding: 0 15px; 
    vertical-align: top; 
    width: 218px; 
} 
select option { 
    padding: 7px 15px; 
} 

爲什麼選項字段比選擇更廣泛？你如何適應相同的寬度選擇和相同的文本填充選項？

Answer 1

你隱藏的文字標識溢出的原因。如果刪除寬度，它將擴展到需要顯示所有option值的寬度。如果你不想選擇更大然後是留給你改變font-size

select { 
 
    -moz-appearance: none; 
 
    border: 1px solid #333; 
 
    color: #999; 
 
    display: inline-block; 
 
    font-size: 12px; 
 
    height: 39px; 
 
    padding: 0 15px; 
 
    vertical-align: top; 
 
} 
 
select option { 
 
    padding: 7px 15px; 
 
}

<select> 
 
<option selected="selected" value="">Please select one:</option> 
 
<option value="1">Prayer Requests</option> 
 
<option value="2">Financial Assistance</option> 
 
<option value="3">Life, Illness & Loss</option> 
 
<option value="4">Marriage, Relationship & Family</option> 
 
<option value="5">Life Controlling Issues & Addictions</option> 
 
<option value="6">Counseling & Life Improvement</option> 
 
<option value="7">Other</option> 
 
</select>

Answer 2

因爲在你CSS你給select固定width改變你的風格，如下

select option { 
    padding: 7px 4px; 
}