選擇和輸入字段，相同的格式，不同的大小

Question

爲什麼<input>和<select>字段以不同的大小顯示，即使以相同的方式格式化？

.classname fieldset input,select { 
    float: right; 
    width: 50%; 
} 

的<select>比<input>小一點結束。 - 這是一個fiddle。

Answer 1

嘗試指定box-sizing和正在重置border值：

.classname fieldset input,select 
{ 
    float: right; 
    width: 50%; 
    -ms-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box; 
    border: 1px solid #AAA; /* Set your color here. */ 
} 

Answer 2

正如指出的那樣，你很可能需要設置box-sizing，但它應被設置爲border-box，而不是content-box，這意味着你也應該不需要更改別的：

.classname fieldset input,select { 
    float: right; 
    width: 50%; 
    box-sizing:border-box; 
} 

Box-Sizing:

盒子大小的CSS屬性用於更改用於計算元素寬度和高度的默認CSS盒子模型 。

邊界框

的寬度和高度屬性包括填充和邊界，但不 的餘量。