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

109

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

这是我的代码：

<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或表行中设置这些元素，但这无济于事。

问：如何获得这些元素的宽度完全相等？

— luk4443
source

1

在这里问同样的问题：stackoverflow.com/questions/895904/…–

— BlaM

134

更新的答案

这是如何更改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/

— 加布里埃莱·彼得里奥利（Gabriele Petrioli）
source

谢谢您的回复。如果我将边框设置为2px，则输入和选择字段之间将有4像素，对于3px边框-6px ...？

— luk4443'1

1

@luk，不。如果输入和选择具有相同的边框宽度则差值将保持到2个像素..

— 加布里埃尔Petrioli

谢谢。我在各种浏览器中尝试了您的代码，在Firefox中一切正常，但是在IE 8和Opera中却无法正常工作（在输入和选择宽度上存在差异）：(

— luk4443，2010年

1

也许您的意思是指定box-sizing：border-box？我想这就是你的意思。内容框是默认的填充和边距添加到宽度的位置。

— O'Rooney'4

1

确实应该是：-ms-box-sizing：content-box; -moz-box-sizing：content-box; -webkit-box-sizing：content-box; box-sizing：content-box; 标准语法应遵循渐进增强方法的最后要求，以便将来在广泛实施该标准时，用户代理将默认使用标准语法，并且您可以删除带前缀的版本。

— user1739635

118

我在上面尝试了Gaby的答案（+1），但这只能部分解决我的问题。相反，我使用了以下CSS，其中content-box更改为border-box：

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

— tomsv
source

是的，似乎表单字段（例如：textarea，输入字段）始终与边界框模型兼容。默认情况下，按钮，复选框，单选框，单选，提交，重置和搜索输入为边框。

— Vennsoh

2

对于为什么要使用，box-sizing: border-box这是一个很好的论点。为了实现良好的通用性，请考虑在顶层html元素上进行设置，然后向下继承，以便可以轻松覆盖它。

— KyleMit 2015年

在我的情况下，内容框什么也没做。我需要边框使它们具有相同的宽度。谢谢，边界框绝对是更好的解决方案。

— 曼努埃尔·霍夫曼

5

在CSS中添加以下代码：

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

— 151291
source

-4

创建另一个类，并增加2px的大小示例

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }

— ionMobDev
source