在CSS中将文本和选择框对齐到相同的宽度？

Question 1

好的，这似乎不可能正确。我有一个文本框和一个选择框。我希望它们的宽度完全相同，以便它们在左边距和右边距上对齐。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
        </select>
    </body>
</html>

您会那样做，对吗？不。在Firefox中，选择框短6像素。查看截图。 Firefox中的屏幕截图

好的，让我们编辑代码并制作两种样式。

<style type="text/css">
    input {
        width: 200px;
    }
    select {
        width: 206px;
    }
</style>

好的，行得通！

在Firefox中修复

哦，等等，在Chrome中进行更好的测试...

chrome屏幕截图

FFFFFFFUUUUUUUUUUUU

有人可以告诉我如何在所有浏览器中排列它们吗？我为什么不能只做宽度：全部为200px，为什么所有浏览器都以不同的方式显示宽度？同样，当我们使用它时，为什么文本框和选择框的高度不同？我们如何使它们达到相同的高度？尝试过的高度和线高没有用。

解：

好的，我从下面的答案中获得了一些帮助，找到了解决方案。关键是使用box-sizing：border-box属性，因此当您指定包含边框和填充。在这里查看出色的解释。然后，浏览器无法填充它。

代码在下面，还将框的高度设置为相同的大小，并在框内缩进了文本，使其对齐。您还需要设置边框，因为Chrome的边框看起来很古怪，它用于选择框，因此会导致对齐问题。这将适用于HTML5网站（例如，支持IE9，Firefox，Chrome，Safari，Opera等）。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
                border: 1px solid #000;
                padding: 0;
                margin: 0;
                height: 22px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            input {
                text-indent: 4px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
            <option>123456789 123123123123</option>
            <option>123456789 123123123123 134213721381212</option>
        </select>
    </body>
</html>

您可能不希望在此样式中包括输入按钮，复选框等，这只是一个最后的警告，因此请使用input:not([type='button'])来将其不应用于某些类型，或用于input[type='text'], input[type='password']指定您希望应用于的类型。

Question 2

这是因为该<input type="text" />元素的默认样式与该<select>元素略有不同，例如，边框，填充和边距值可能不同。

您可以通过元素检查器（例如Firefox的Firebug或Chrome的内置样式检查器）观察这些默认样式。此外，这些默认样式表因浏览器而异。

您有两种选择：

明确设置两个元素的边框，填充和边距值相同
要在自己的CSS样式表之前包含的CSS重置样式表

我会选择选项1，因为选项2需要大量的工作，并且最终会产生大量不必要的CSS。但是某些Web开发人员更喜欢从头开始并拥有完全的控制权。

Question 3

这样可以使您接近，但是几乎不可能达到这样的精确度。

<div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div>
<div style="width: 200px">
    <select id="Select1" style="width: 100%; margin: 0; padding: 0">
        <option>1</option>
    </select>
</div>

Question 4

默认情况下，不同的浏览器会应用不同的样式。我发现将margin和padding都重置为0会使两个元素在Firefox和Chrome中的宽度相等。

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            input, select {
                margin: 0;
                padding: 0;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br />
        <select>
            <option>123</option>
        </select>
    </body>
</html>

我个人喜欢在尝试使设计在多个浏览器中看起来更好之前，使用最小的CSS重置样式表（例如YUI CSS Reset）。

Question 5

将一个类添加到有问题的选择和输入标签中，即：

<input class='custom-input'/>
<select class='custom-input'></select>

然后修改以下CSS以适合您的设计：

.custom-input {
        width:140px;
        border:1px solid #ccc;
        margin:1px;
        padding:3px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing:content-box;
        -moz-box-sizing:content-box;
        -webkit-box-sizing:content-box;
        box-sizing:content-box;
    }

认为这是支持浏览器的修复程序

Question 6

如果您使用表4输入，则可以使用以下解决方案-也与ie7兼容：

<tr style="width:1px;"><td style="width:inherit;position:relative;">
    <select style="width:100%;"> 
    </select> 
</td></tr>
<tr><td>
    <input type="text" style="width:150px;"/>
</td></tr>

这样，表格单元格的宽度将固定为输入的宽度，

这样，选择将始终采用剩余宽度并与d输入完美对齐。

Question 7

尝试删除两个元素的默认边框：

select, input {
 border:0;
}

Question 8

是的，非常沮丧。但是，直到在我的HTML页面顶部放置一个“ <！DOCTYPE html>”标记之前，我从未遇到任何问题。我的网页在可以测试的所有平台上均正确呈现，直到将该标记放在文档顶部。

虽然这是“真正的规格”，但似乎是这些对齐问题的根源。FWIW，我使用的是HTML5元素，嵌入式CSS等，所有这些都没有该标签来指定HTML5。YMMV。