html css多选框左对齐,html – 对齐文本和选择框在CSS相同的宽度？

Ok这似乎不可能得到正确。我有一个文本框和一个选择框。我想他们是相同的宽度，所以他们排队在左边距和右边距。

input, select {

width: 200px;

}

123

那会是你想的，对吧？不。 Firefox中的选择框缩短6px。查看屏幕截图。

好，让我们编辑代码，使两个样式。

input {

width: 200px;

}

select {

width: 206px;

}

确定工作！

等待，在Chrome中测试更好！

有人可以告诉我如何在所有浏览器中排队这些？为什么我不能只做宽度：200px所有，为什么所有的浏览器显示不同？另外，虽然我们在它为什么是文本框和选择框不同的高度？我们如何让他们到同样的高度？已尝试高度和行高没有效用。

解：

Ok我找到了解决方案，从下面的答案一些帮助。关键是使用box-sizing：border-box属性，因此当您指定包括边框和填充的宽度时。参见excellent explanation here.然后浏览器不能填充它。

代码在下面，还设置框的高度为相同的大小和缩进框中的文本，使其排列。你还需要设置边框，因为Chrome有一个真正奇怪的边框，它使用的选择框，将抛出的对齐方式。这将适用于HTML5网站(例如支持IE9，Firefox，Chrome，Safari，Opera等)。

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;

}

123

123456789 123123123123

123456789 123123123123 134213721381212

只需一个最后一个警告，你可能不希望输入按钮，复选框等包含在这个样式，所以使用输入：not([type =’button’])不应用于某些类型或使用输入[type =’text’ ]，输入[type =’password’]以指定您希望它应用于的类型。