81

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

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

好的，这行得通！

已在 Firefox 中修复

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

铬截图

FFFFFFFUUUUUUUUUUUUU

有人能告诉我如何在所有浏览器中排列这些吗？为什么我不能只做 width: 200px ，为什么所有浏览器都显示不同？另外，当我们在这里时，为什么文本框和选择框的高度不同？我们如何让它们达到相同的高度？尝试过 height 和 line-height 无济于事。

解决方案：

好的，我在以下答案的帮助下找到了解决方案。关键是使用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']指定您确实希望将其应用于的类型。

4

7 回答 7

7

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

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

你有两个选择：

  1. 将两个元素的边框、填充和边距值显式设置为相同
  2. 要包含在您自己的 CSS 样式表之前的 CSS 重置样式表

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

于 2012-04-03T21:13:12.127 回答
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>
于 2012-04-03T21:08:05.087 回答
3

不同的浏览器默认应用不同的样式。我发现在 Firefox 和 Chrome 中将边距和填充都重置为 0 会使两个元素的宽度相等。

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

于 2012-04-03T21:12:36.207 回答
2

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

<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 这是对支持浏览器的修复

于 2015-03-13T11:35:58.637 回答
0

如果您使用表 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>

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

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

于 2012-07-29T07:35:45.960 回答
0

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

select, input {
 border:0;
}
于 2013-01-09T10:04:03.390 回答
0

是的，非常令人沮丧。但是，直到我在 HTML 页面的顶部放置一个“<!DOCTYPE html>”标签之前，我从来没有遇到过问题。我的网页在我可以测试的所有平台上都正确呈现，直到我将该标签放在我的文档顶部。

虽然这是“真正的规范”，但它似乎是这些对齐问题的根源。FWIW，我正在使用 HTML5 元素、内联 CSS 等，所有这些都没有该标记来指定 HTML5。YMMV。

于 2015-07-20T17:03:03.470 回答