<input> 无法对齐之暂时解决

最近在制作一个页面的时候在同一行使用了<input>输入框和按钮<button>,发现这两个元素无论如何都没法对齐,一个比一个高那么几个像素。在网上搜索了一下发现这是一个普遍问题。可以在CSS里面进行vertical-align设置来调整

对于一个单独的页面来说,我可能不想去调整CSS文件,于是想直接在HTML范围内解决掉。一开始我甚至尝试了使用表格来强制定位,但还是没有效果。然后模仿CSS给<input>加上了style="vertical-align:middle"。页面无动无衷。后来查到了这个,于是我用了<input type="text" style="vertical-align:baseline>。这下可以了。

也不知道这种解决方案是否通用,还是只能具体页面具体调试,总之记在这里吧。希望以后遇到相似的问题可以查得到自己曾经是怎么解决的。

打赏

点赞