对齐文本和选择框在CSS相同的宽度？(Aligning text and select boxes

好吧，这是看似不可能得到正确的。我有一个文本框和选择框。我希望他们能够准确地让他们排队在左侧距和右边距的宽度相同。

<!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个像素短。见截图。

好所以让我们编辑的代码，使两种风格。

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

好了的作品！

哦，等等，更好的测试在Chrome ...

谁能告诉我如何在所有浏览器排队这些吗？为什么我不能只是做宽：在所有200像素，为什么所有的浏览器显示不同呢？另外虽然我们在它为什么是文本框，选择框不同的高度？我们如何让他们到相同的高度？试过高度和行高没有无济于事。

解：

好，我发现从下面的答案一定帮助解决。关键是要使用箱大小：当您指定， 其中包括边界和填充宽度边界框属性，因此。见这里优秀的解释。然后，浏览器可以没有的东西它。

代码如下，还设置框的高度，以相同的尺寸和缩进箱子中的文本，因此排队。您还需要设置边框为Chrome浏览器有它使用选择框将抛出对准一个非常怪异的边界。这将为HTML5网站的工作（如支持IE9，火狐，Chrome，Safari浏览器，歌剧等）。

<!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']指定你想它适用于那些。

Answer 1:

这是因为<input type="text" />元件具有略微不同的默认的样式到<select>例如边界，空白和边距值元件可以是不同的。

你可以通过观察一个元素检查这些默认的风格，如Firefox的Firebug或内置一个Chrome浏览器。 Futhermore，这些默认样式不同于浏览器的浏览器。

你有两个选择：

明确设置边框，空白和边距值是两个元素相同
要包含自己的CSS样式表前的CSS样式表复位

我会选择1走，因为选项2，需要大量的工作，你会吨不必要的CSS的结束。但是，一些Web开发人员更愿意从头开始，并拥有完全控制权。

Answer 2:

这将让你接近，但精度这一水平几乎是不可能的。

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

Answer 3:

不同的浏览器默认情况下，应用不同的样式。我发现，无论边距和填充重置为0，使两个元件相等的宽度在两个Firefox和铬。

<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重置试图使设计在多个浏览器看起来很棒了。

Answer 4:

一类添加到两个问题，即选择和输入标签：

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

obvs这是支持的浏览器修复

Answer 5:

如果u使用表4输入ü可以采用如下方案 - 也compatable 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输入。