如何获得相同的input和select字段的宽度

在窗体上，我有一个select和两个input字段。 这些元素是垂直alignment的。 不幸的是，我无法得到这些元素的相等的宽度。

这是我的代码：

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

对于上面的例子，select元素的最佳宽度是198或199像素（当然，我尝试了193像素，但差别很大）。 我认为，这取决于分辨率，在各种计算机和浏览器，因为这些元素没有相等的宽度（有时我认为差异大约是1或2像素）。 我试图设置div或表行中的这些元素，但它没有帮助。

问：我怎么能得到这些元素的精确相等的宽度？

Answer 1

更新了答案

以下是如何更改input / 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元素总是比input元素小2个像素。

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

Answer 2

我试过了盖比的答案（+1），但这只是部分解决了我的问题。 相反，我使用了以下CSS，其中内容框被更改为边框：

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

Answer 3

在CSS中添加此代码：

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

Answer 4

创build另一个类并用2px示例增加大小

 .enquiry_fld_normal{ width:278px !important; } .enquiry_fld_normal_select{ width:280px !important; }