如何获得相等的输入宽度和选择字段

Question

在表单上,​​我有一个选择和两个输入字段.这些元素垂直对齐.不幸的是,我无法获得这些元素的相等宽度.

这是我的代码:

<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 px(当然我尝试了193px,但差别很大).我认为,这取决于各种计算机和浏览器的分辨率,因为这些元素没有相同的宽度(有时我认为差异大约是1或2像素).我试图在div或table行中设置这些元素,但它没有帮助.

问:我如何才能获得这些元素的精确宽度？

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

我尝试了Gaby的答案(+1),但它只是部分解决了我的问题.相反,我使用了以下CSS,其中content-box被更改为border-box:

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;
    }