Html 如何获得相等宽度的输入和选择字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4073768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get equal width of input and select fields
提问by luk4443
On the form, I have one select and two input fields. These elements are vertically aligned. Unfortunately, I can't get equal width of these elements.
在表单上，我有一个选择和两个输入字段。这些元素垂直对齐。不幸的是，我无法获得这些元素的相等宽度。
Here's my code:
这是我的代码：
<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">
For above example, the best width for select element is 198 or 199 px (of course I tried 193px, but the difference is major). I think, it depends on resolution, on various computers and browsers since these elements don't have equal widths (sometimes I thinks difference is about 1 or 2 px). I've tried to set these elements in div or table rows, but it doesn't help.
对于上面的例子，选择元素的最佳宽度是 198 或 199 像素（当然我试过 193 像素，但差异很大）。我认为，这取决于分辨率，在各种计算机和浏览器上，因为这些元素的宽度不同（有时我认为差异约为 1 或 2 像素）。我试图在 div 或 table 行中设置这些元素，但没有帮助。
Q: How could I get precisely equal width of these elements?
问：我怎样才能得到这些元素的完全相等的宽度？
回答by Gabriele Petrioli
Updated answer
更新答案
Here is how to change the box model used by the input/textarea/select elements so that they all behave the same way. You need to use the box-sizingproperty which is implemented with a prefix for each browser
以下是如何更改 input/textarea/select 元素使用的框模型，以便它们的行为方式相同。您需要使用box-sizing每个浏览器的前缀实现的属性
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
This means that the 2px difference we mentioned earlier does not exist..
这意味着我们之前提到的 2px 差异不存在。
example at http://www.jsfiddle.net/gaby/WaxTS/5/
示例在http://www.jsfiddle.net/gaby/WaxTS/5/
note:On IE it works from version 8 and upwards..
注意：在 IE 上，它适用于版本 8 及更高版本。
Original
原来的
if you reset their bordersthen the selectelement will always be 2 pixels less than the inputelements..
如果您重置它们的边框，则select元素将始终比input元素少 2 个像素。
回答by tomsv
I tried Gaby's answer (+1) above but it only partially solved my problem. Instead I used the following CSS, where content-box was changed to border-box:
我尝试了上面 Gaby 的回答（+1），但它只是部分解决了我的问题。相反，我使用了以下 CSS，其中内容框更改为边框框：
input, select {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
回答by 151291
Add this code in css:
在 css 中添加以下代码：
select, input[type="text"]{
width:100%;
box-sizing:border-box;
}
回答by ionMobDev
create another class and increase the with size with 2px example
创建另一个类并使用 2px 示例增加大小
.enquiry_fld_normal{
width:278px !important;
}
.enquiry_fld_normal_select{
width:280px !important;
}
