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

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

对于上面的例子，选择元素的最佳宽度是 198 或 199 像素（当然我试过 193 像素，但差别很大）。我认为，这取决于各种计算机和浏览器的分辨率，因为这些元素的宽度不相等（有时我认为差异约为 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，其中内容框更改为边框框：

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

首先将每个元素的宽度设置为相等，在您的情况下宽度为 193px 或 198px。然后，您可以在下面关注其中之一。

一种。以您选择和输入的样式添加此行 box-sizing: border-box; 。就像style="width:198px; box-sizing: border-box;"

或者

湾。在您的 CSS 中添加这些行（无论您使用的是外部 CSS 还是内部 CSS）。

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

Answer 5

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

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }