【#文档大全网# 导语】以下是®文档大全网的小编为您整理的《关于input框对齐文字的一些总结》，欢迎阅读！
之前转载过一篇牛人的文章[表单元素与提示文字无法对齐的问题(input,checkbox文字对齐）]，但是由于自己太懒,没仔细研读文章。所以一直用原来的方法来让表单元素与提示文字对齐。之前的方法是: 让input和label元素全部浮动。为input设置width/height/margin-top；为label设置height，line-height;这种方法不是不行，1，设置过多属性；2，需要给两个元素浮动之后还要清除浮动；这样的话就比较繁琐了。
今天重新翻开之前的这篇文章发现其实我读不下去的原因是这篇文章前面有太多的分析和比较，这需要很大的耐心，而我这段时间一直很浮躁，看东西只想一下子得到最后的标准答案。而在IT界这简直是荒谬的。所以我到今天仔细重读这篇文章的时候才知道这篇文章介绍方法。
总结这篇[表单元素与提示文字无法对齐的问题(input,checkbox文字对齐）]文章的最终方法是：
1. 将文字第一字体设置为Tahoma；
2. 为input元素设置vertical-align:middle;
3. 为label元素设置vertical-align:middle;
这样表单元素和提示文字就达到完美的对齐了。但是等等这里说的对齐只是相对的对齐，原因是中文字体是方块字高度有可能是奇数或者偶数，input元素的高度是奇数当字体高度为偶数时，在网页中最小单位是1px，上下总是不能完美对齐的总有1px的差别。而这1px相对这里而言还是可以接受的。这样这篇文章对表单元素和提示文字的对齐问题探讨结束！
但是，等等！我也来较较真，毕竟做了这么多项目，也该对这个问题认真的做一个交代了。首先，对着上面文章做了一个仔细的验证。ok，确实完美对齐；到这里还没结束，我给所有的input和label放到ul和li元素里并给li加上1px的实体border，再次在ie6和firefox中打开，结果使人大跌眼睛。IE6下input元素和label内的文字似乎对li上边框特别钟情，虽然对齐了文字却在li里向上飘移。即使我对input、label、li都分别设置了line-height:;也无济于事。
ie6： firefox:
怎么办？在周总结会上，一位朋友的研究给了我启发，给label元素加上display:inline-block;这是奇迹出现了ie6和firefox表现一致；由此对关于input框对齐提示文字的探讨告一段落。总结最终的方法如下：
1. 将文字第一字体设置为Tahoma；
2. 为input元素设置vertical-align:middle;
3. 为label元素设置vertical-align:middle;display:inline-block;
虽然中间参考和借鉴的不少人的方法，但是总算对这一问题做了一个交代。
2023-04-20
