将文本对齐并选择框在CSS中具有相同的宽度？ [英] Aligning text and select boxes to the same width in CSS?
问题描述
Ok这似乎不可能得到正确。我有一个文本框和一个选择框。我希望它们的宽度完全相同，因此它们在左边距和右边距上排列。
<！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;
}
select {
width：206px;
}
< / style>
确定无效！
等待，更好地在Chrome中测试。 ..
<有人能告诉我如何在所有浏览器中排列这些？为什么我不能只做宽度：200px所有，为什么所有的浏览器显示不同？此外，虽然我们在它为什么是文本框和选择框不同的高度？我们如何让他们到同样的高度？已尝试高度和线高度无效。
解决方案：
Ok我找到了解决方案，从下面的答案一些帮助。关键是使用 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>
只需一个最后一个警告，您可能不希望输入按钮，复选框等包含在此样式中，因此请使用 input：not（[type ='button']）不适用于某些类型或使用 input [type ='text'
这是因为< input type =text/> 元素的默认样式与< select& code>元素例如边框，填充和边距值可能不同。
您可以通过元素检查器（例如Firefox的Firebug或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屋！
