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

对于上面的例子，select元素的最佳宽度是198或199 px（当然我尝试了193px，但差别很大）。我认为，这取决于各种计算机和浏览器的分辨率，因为这些元素没有相同的宽度（有时我认为差异大约是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，其中content-box被更改为border-box：

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

或

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

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

Answer 5

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

<ImageView 
     ....
     android:src="@drawable/your_selector_xml"/>

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

5 个答案: