如何獲得等寬輸入和選擇字段

在表單上，我有一個選擇和兩個輸入字段。這些元素是垂直對齊的。不幸的是，我無法獲得這些元素的相同寬度。如何獲得等寬輸入和選擇字段

這裏是我的代碼：

<select name="name1" style="width:198px"> 
    <option>value1</option> 
    <option>value2</option> 
</select><br/> 
<input type="text" name="id1" style="width:193px"><br/> 
<input type="text" name="id2" style="width:193px">

對於上面的例子中，對於選擇元素的最佳寬度爲198或199像素（當然我試過193px，但不同的是主要的）。我認爲，這取決於分辨率，在各種計算機和瀏覽器上，因爲這些元素沒有相同的寬度（有時我認爲差異大約是1或2像素）。我試圖在div或表格行中設置這些元素，但它沒有幫助。

問：我怎麼能得到這些元素的精確相等的寬度？

來源

2010-11-01 luk4443

同樣的問題在這裏問：http://stackoverflow.com/questions/895904/select-inputs-and-text-inputs-in-html-best-way-to-make-equal-width/899283 – BlaM 2013-03-18 14:02:42

111

更新答案

這裏是如何改變通過輸入/ textarea的/ select元素使用的盒模型，使它們都具有相同的行爲方式。您需要使用box-sizing財產與前綴來實現對每個瀏覽

-ms-box-sizing:content-box; 
-moz-box-sizing:content-box; 
-webkit-box-sizing:content-box; 
box-sizing:content-box;

這意味着，我們前面提到的2px的差異不存在..

例如在http://www.jsfiddle.net/gaby/WaxTS/5/

注意：在IE上，它可以從版本8以上版本上運行..

原始

，如果你重新設置他們的邊界那麼select元素永遠是2個像素比input元素少..

例如：http://www.jsfiddle.net/gaby/WaxTS/2/

來源

2010-11-01 23:09:43

感謝您的回覆年。如果我爲2px設置邊框，則在輸入和選擇字段之間會有4個像素，對於3px邊框 - 6px ...？ – luk4443 2010-11-01 23:38:20

@luk，no。如果兩個輸入和選擇具有相同的邊框寬度，那麼差異將保持爲2像素。 – 2010-11-01 23:43:08

謝謝。我嘗試在各種瀏覽器和Firefox中的代碼一切都很好，但它不能在IE 8和Opera（不同的beetwen輸入和選擇寬度）：（ – luk4443 2010-11-01 23:50:23

我試圖加比的答案（ +1）以上，但它只是部分解決了我的問題。相反，我用下面的CSS，在內容框改爲邊界框：

input, select { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
}

來源

2011-05-05 09:26:53 tomsv

+21

比接受的答案更好 – cguedel 2013-06-06 08:57:16

Yup，似乎表單字段例如：textarea，輸入字段總是與邊框框模型一起工作良好。按鈕，複選框，收音機，提交，重置和搜索輸入默認爲邊框。 – Vennsoh 2013-08-22 03:03:39

更多的信息：https：//developer.mozilla.org/en-US/docs/Web/CSS/box-sizing – JorgeeFG 2014-03-28 18:51:47

添加該代碼在CSS：

select, input[type="text"]{ 
     width:100%; 
     box-sizing:border-box; 
    }

來源

2015-08-08 09:50:24 151291

-3

創建另一個類，並增加與尺寸與2px的例子

.enquiry_fld_normal{ 
width:278px !important; 
} 

.enquiry_fld_normal_select{ 
width:280px !important; 
}

來源

2016-01-07 11:03:48 yousuf

如何獲得等寬輸入和選擇字段

回答

相關問題