项目场景:
最近在写一个网站的时候觉得单调了,然后我就在一个input框的右边加入了阿里的iconfont字体图标,结果神奇的事情发生了...
问题描述
如下图所示,这是还没在输入框右边加入icon图标的情况,可以看到是正常的:
当我加入了一个button按钮里边放置了icon图标之后,可以看到好像还是正常的:
接下来我嫌图标太小了,我就调了以下icon的大小,然后就变成了下面这样:
原因分析:
我当时下意识的去调输入框的位置,给输入框添加了内外边距,但是都没有效果,如图所示:
接下来我调了半天都没有任何作用,突然灵光一闪,想到icon图标其实被认为是字体了,而不是一张图,我这才反应过来两个盒子内的字体会根据两边字体的底部进行对齐,这样的话就影响到了两个盒子之间的布局,除非两个盒子设置的字体样式大小是一样的,那么就不会出现这种情况!
解决方案:
找到了原因就好解决了,除了上面说的设置大小一致可以解决以外,我们可以设置下输入框的vertical-align垂直对齐方式为top,使它的顶端与行中最高元素的顶端对齐,效果如下图:
vertical-align: top;
发现已经对齐了,perfect~
🥇原创不易,还希望各位大佬支持一下!
👍点赞,你的认可是我创作的动力 !
🌟收藏,你的青睐是我努力的方向!
✏️评论,你的意见是我进步的财富!