<input />和<select> widths </select>

Question

我尝试在input下放置一个select文本框，其中input用于向select添加新项目。当然，我希望它们具有相同的宽度。但是，这似乎不起作用（我不想设置不同的宽度，因为所需的差异可能因浏览器和平台而异）：

select, input {
 min-width: 16em;
}

文本框比select宽6个像素。

http://forums.mozillazine.org/viewtopic.php?f=25&t=1555685上的一篇论坛帖子建议强制内容框大小调整（而不是边框​​或其他默认值）会使它们相同。这有点帮助，将select宽度增加了两个像素，但文本框仍然宽了四个像素：

select, input {
 min-width: 16em;
 box-sizing: content-box;
 -moz-box-sizing: content-box;
}

我想要尝试的是有一个宽度为16em的容器，并将其两个子项设置为width: 100%;，希望它们的宽度相同。不幸的是，这也不起作用：

我可以试着让它们的宽度相同吗？我目前正在使用Darklooks GTK +主题在Ubuntu 11.04上使用Firefox 4.0b7进行测试，当然，我想要一个在所有地方同样适用的解决方案。

Answer 1

文本输入中是否有左右填充的1个像素？

Mac上的FireFox对我来说看起来宽度相同。

Answer 2

在包装div上

，您可以添加display: -moz-groupbox;

直播示例：http://jsbin.com/alixi5

Answer 3

将它们放在具有所需宽度的div中，并为选择和输入分配100％的宽度。

修改1 以下代码适用于我的计算机 ^tm

<div style="width: 400px">
<select style="width:100%" multiple="multiple">
    <option>Value1</option>
    <option>Value2</option>
    <option>Value3</option>
    <option>Value4</option>
</select>
<input type="text" style="width:100%">

适用于Firefox 2.0，Chrome 8.0.552.215，IE8 8.0.7600.16385