在CSS中将文本和选择框对齐到相同的宽度？ [英] Aligning text and select boxes to the same width in CSS?
问题描述
<！DOCTYPE HTML>
< html>
< head>
< style type =text / css>
输入，选择{
width：200px;
}
< / style>
< / head>
< body>
< input type =textvalue =ABC>< br>
< select>
< option> 123< / option>
< / select>
< / body>
< / html>
你会这样做，对吧？不。 Firefox中的选择框为6px。见截图。
好吧，让编辑代码并且制作两种样式。
< style type =text / css>
input {
width：200px;
}
选择{
width：206px;
}
< / style>
确定这个工作！
哦，等等，更好的测试在Chrome。 ..
<有人可以告诉我如何在所有浏览器中排列这些？为什么我不能做宽度：200px，为什么所有浏览器显示不同？同时我们在这里为什么文本框和选择框不同的高度？我们如何让他们达到同样的高度？
解决方案：
$ b $好吧，我从下面的答案中找到了一些帮助的解决方案。关键是使用 box-sizing：border-box 属性，因此当您指定包含边框和填充的宽度时。请参阅这里的优秀说明。然后浏览器无法填满它。
代码在下面，还将框的高度设置为相同的大小，并缩进框内的文本，以便它排队您还需要设置边框，因为Chrome具有非常奇怪的边框，它用于选择框，这将会抛出对齐。这将适用于HTML5网站（例如支持IE9，Firefox，Chrome，Safari，Opera等）。
<！DOCTYPE html> ;
< html>
< head>
< style type =text / css>
输入，选择{
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 =textvalue =ABC>< br>
< select>
< option> 123< / option>
< option> 123456789 123123123123< / option>
< option> 123456789 123123123123 134213721381212< / option>
< / select>
< / body>
< / html>
只需一个最后的警告，您可能不需要输入按钮，复选框等包含在此样式中，因此使用输入：not（[type ='button']）不将其应用于某些类型或使用 input [type ='text']，输入[type ='password'] 来指定你想要应用的。
这是因为< input type =text/> 元素与< select> 元素例如边框，填充和边距值可能不同。
您可以通过元素检查器观察这些默认样式，例如Firebug for Firefox或内置的Chrome。此外，这些默认样式表与浏览器不同。
您有两个选项：
- 明确地将两个元素的边框，填充和边距值设置为相同
- 将CSS重定义样式表包含在您自己的CSS样式表之前
我会选择1，因为选项2.需要大量的工作，你会得到大量不必要的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>
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>
Ok that works!
Oh wait, better test in Chrome...
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.
Solution:
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.
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>
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.
This is because the <input type="text" /> element has a slightly different default style to the <select> element e.g. the border, padding and margin values may be different.
You can observe these default styles through an element inspector such as Firebug for Firefox or the built-in one for Chrome. Futhermore, these default stylesheets differ from browser to browser.
You have two options:
- Explicitly set the border, padding and margin values to be the same for both elements
- A CSS reset stylesheet to be included before your own CSS stylesheets
I would go with option 1. because option 2. requires a lot of work and you'll end up with tons of unnecessary CSS. But some web developers prefer to start from scratch and have complete control.
这篇关于在CSS中将文本和选择框对齐到相同的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
