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

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

这是我的密码:

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

问: 怎样才能精确地得到这些元素的宽度相等？

131770 次浏览
小开
最佳答案

最新答案

下面是如何更改 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..

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

注意: < em > 在 IE 上，它可以从版本8开始工作。

原创的

如果你重置它们的 边界，那么 select元素总是比 input元素少2个像素。

例子: http://www.jsfiddle.net/gaby/WaxTS/2/

小开

我尝试了上面 Gaby 的回答(+ 1) ，但它只是部分地解决了我的问题。相反，我使用了下面的 CSS，其中内容框被改为边框框:

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

在 css 中添加以下代码:

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

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

.enquiry_fld_normal{
width:278px !important;
}


.enquiry_fld_normal_select{
width:280px !important;
}
小开

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

加上这一行 box-sizing: border-box; 在你选择和输入的样式。就像 style="width:198px; box-sizing: border-box;"

或者

在你的 CSS 中添加这些线条(无论你使用的是外部的还是内部的 CSS)。

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

提交答案