alignment文本和select框在CSS中相同的宽度？
好吧，这似乎不可能得到正确的。 我有一个文本框和一个select框。 我希望他们是相同的宽度，所以他们排列在左边距和右边距。
<!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中的select框较短6px。 看截图。 
好吧，让我们编辑代码并制作两种样式。
<style type="text/css"> input { width: 200px; } select { width: 206px; } </style>
好的，这工作！
哦，等等，在Chrome中更好的testing…
有人能告诉我如何排列在所有浏览器？ 为什么我不能只做width：200px，为什么所有的浏览器都以不同的方式显示呢？ 同时，我们为什么是文本框和select框不同的高度？ 我们如何让他们达到相同的高度？ 已经尝试了高度和线高无不可用。
解：
好吧，我find了解决scheme，并从下面的答案中获得了一些帮助。 关键在于使用box-sizing：border-box属性，以便在指定包含边框和填充的宽度时使用。 在这里看到很好的解释 然后浏览器不能把它填满。
代码如下所示，还将框的高度设置为相同的大小，并缩小框内的文本，使其排成一行。 您还需要设置边框为Chrome浏览器有一个非常奇怪的外观边框，用于select框将抛出alignment。 这将适用于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>
只是最后一个警告，你可能不希望inputbutton，checkbox等被包含在这个样式中，所以使用input:not([type='button'])不适用于某些types或使用input[type='text'], input[type='password']来指定你想要应用的。
这是因为<input type="text" />元素与<select>元素具有稍微不同的默认样式，例如边界，填充和边距值可能不同。
您可以通过元素检查器（例如Firefox的Firebug或Chrome的内置检查器）观察这些默认样式。 而且，这些默认样式表在浏览器和浏览器之间是不同的。
你有两个select：
- 显式设置边界，填充和边距值对于这两个元素都是相同的
- 一个CSS重置样式表要包含在自己的CSS样式表之前
我会select1，因为选项2需要大量的工作，你最终会得到大量不必要的CSS。 但是一些networking开发人员喜欢从头开始，并有完全的控制权。
这会让你接近，但是这种精确度几乎是不可能的。
<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>
不同的浏览器默认应用不同的样式。 我发现将margin和padding重置为0会使Firefox和Chrome中的两个元素的宽度相等。
<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>
我个人喜欢在尝试使devise在多个浏览器中看起来很棒之前，使用像YUI CSS Reset这样的最小的CSS重置样式表。
添加一个类到select和input标签问题即：
<input class='custom-input'/> <select class='custom-input'></select>
然后修改下面的CSS来适合你的devise：
.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这是一个支持浏览器的修复程序
如果你使用表4input你可以使用下面的解决scheme – 也与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>
这样，表单元格宽度将固定为input的宽度，
因此，select将总是采取剩余的宽度，并与dinput完美的排队。
尝试从两个元素中删除默认边框：
select, input { border:0; }
是的，非常令人沮丧。 然而，我从来没有遇到过这个问题，直到我在HTML页面的顶部放置了一个“<！DOCTYPE html>”标签。 我的网页在我可以testing的所有平台上正确呈现，直到我将该标记放在文档的顶部。
虽然这是“真正的规格”，但似乎是这些alignment问题的根源。 FWIW，我使用HTML5元素，内联CSS等，都没有该标签来指定HTML5。 因人而异。
