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

小编典典

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

css

在表单上，我有一个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">

对于上面的示例，select元素的最佳宽度是198或199 px（当然我尝试了193
px，但差异很大）。我认为，这取决于分辨率，取决于各种计算机和浏览器，因为这些元素的宽度不相等（有时我认为差异约为1或2像素）。我试图在div或表行中设置这些元素，但这无济于事。

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

阅读 239

2020-05-16

共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差异不存在。

注意： 在IE上，它可以从版本8开始使用。

原版的

如果重置 边框， 则该select元素将始终比该input元素小2个像素。

2020-05-16