子头部调试的两个问题
1.子头部位置错移，如下，左侧设置的是左浮动，但它还是向右了，将右侧挤到下一行中
2.搜索图标与背景错位，这个错位的根本原因是什么？是和display:inline-block有关系吗？
不知道是不是问题1的原因，使用line-height调整，位置更偏移了
代码见如下链接：
我用夸克网盘分享了「c3.zip」，点击链接即可保存。打开「夸克APP」，无需下载在线播放视频，畅享原画5倍速，支持电视投屏。
链接：https://pan.quark.cn/s/9615a4a77306
12
收起
正在回答
1回答
同学，你好！1、同学第一个问题，老师这边是正常的，没有独自成一行，同学清空下浏览器缓存看看能否解决
2、是display:inline-block影响的，当一个元素被设置为inline - block时，它在垂直方向上的对齐方式是基于基线（baseline）对齐的。对于图标来说，它的基线位置不是图标底部，而是图标内部文本内容（如果有）的基线或者是图标的某一默认基线位置。这就导致背景颜色没有完全覆盖图标。
后边老师设置了line-height高度，当设置line-height高度后，会创建一个line-height高度的文本框，图标会在这个文本框内垂直居中，图标和背景色就重合了
祝学习愉快~
-
曲别针010 #1
问题1我知道是什么原因了，是上面一行的元素宽度设置微微超出，将下一行挤变行了，稍微调整下margin-right就可以了
问题2：关于inline-block元素的在垂直方向上的居中问题，还有个问题：
这两张图片没有在上方对齐，也是因为第二章图片中有文字，所以第二章图片靠下了，是吗？但我尝试过设置vertical-align：bottom；并没有作用
2024-11-28 15:13:03
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星