在 CSS 中将文本和选择框对齐到相同的宽度? [英] Aligning text and select boxes to the same width in CSS?

查看：23
本文介绍了在 CSS 中将文本和选择框对齐到相同的宽度?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Ok this is seemingly impossible to get right. I have a text box and a select box. I want them to be the same width exactly so they line up on the left margin and the right margin.

<!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 中的选择框短 6px.见截图.

That would do it you think, right? Nope. The select box is 6px shorter in Firefox. See screenshot.

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

Ok so lets edit the code and make two styles.

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

好的！

哦等等，最好在 Chrome 中测试...

Oh wait, better test in Chrome...

谁能告诉我如何在所有浏览器中排列这些内容?为什么我不能只做 width: 200px ，为什么所有浏览器都显示不同?另外，当我们在此时，为什么文本框和选择框的高度不同?我们如何让它们达到相同的高度?试过 height 和 line-height 都没有用.

Can someone tell me how to line these up in all browsers? Why can't I just do width: 200px on all, why do all the browsers display it differently? Also while we're at it why is the text box and select box different heights? How do we get them to the same height? Have tried height and line-height no no avail.

好的，我已经从下面的答案中找到了一些帮助的解决方案.关键是使用 box-sizing: border-box 属性，这样当您指定包括边框和填充的宽度时.请参阅此处的精彩解释.那么浏览器就塞不进去了.

Ok I've found the solution with some help from the answers below. The key is to use the box-sizing: border-box property so when you specify the width that includes the border and padding. See excellent explanation here. Then the browser can't stuff it up.

代码如下，还将框的高度设置为相同的大小，并将框内的文本缩进以使其对齐.您还需要设置边框，因为 Chrome 有一个非常奇怪的边框，它用于选择框，这将抛出对齐.这将适用于 HTML5 网站(例如，支持 IE9、Firefox、Chrome、Safari、Opera 等).

Code is below, have also set the height of the boxes to the same size and indented the text inside the box so it lines up. You also need to set the border as Chrome has a really weird looking border it uses for select boxes which will throw out the alignment. This will work for HTML5 sites (e.g. supporting IE9, Firefox, Chrome, Safari, Opera etc).

<!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'] 来指定您希望它应用到的那些.

Just one final warning you may not want input buttons, checkboxes etc to be included in this styling so use the input:not([type='button']) to not apply it to certain types or use input[type='text'], input[type='password'] to specify ones you do want it to apply to.

推荐答案

这是因为 <input type="text"/> 元素与 元素的默认样式略有不同>

发送“验证码”获取 | 15天全站免登陆