各个li右侧的>符号的位置

给这些符号设置的都是top:0;所以查看这些元素显示在下图的位置我能接受

可是为什么明明显示这些元素在那里，页面中显示的效果却是和li的内容好像是平行的呢？它们的高度和li的高度不一样的呀

Aurora_Meteor 2020-04-29

源自：实战：订单页&“我的”页面 2-3 我的页-页面样式（2）

30

收起

5回答

好帮手慕言回答被采纳获得+3积分 2020-05-01 19:00:58

同学你好，只要文字和伪元素在一行显示，给li设置了行高，就会出现同学提到的这种情况。设置定位或者调整为内联块元素，只是让li和伪元素在一行显示而已。

祝学习愉快~

好帮手慕言 2020-05-01 15:30:00

同学你好，伪元素也不一定要设置定位，设置成内联块元素也是可以的，只要和文字在一行显示就会出现这种情况。同学可以测试下。

祝学习愉快~

提问者 Aurora_Meteor #1

我的意思是因为“ 给li设置了行高，再给它的伪元素设置了绝对定位和top:0”，所以“不管伪元素的高度是多少，实际显示出来都会和li的内容在同一高度“吗？并不是怎么做才能实现平行，只是想明白出现这样情况的原因...

2020-05-01 15:46:44

好帮手慕言 2020-05-01 11:17:20

同学你好，伪元素会受到行高的影响，可以参考下方的例子：

效果（不管给伪元素设置的高度为多少，效果都是会为如下）

同学可以再理解下，祝学习愉快~

提问者 Aurora_Meteor #1

这意思是给li设置了行高，再给它的伪元素设置了绝对定位和top:0以后，不管伪元素的高度是多少，实际显示出来都会和li的内容在同一高度么？

2020-05-01 11:47:00

好帮手慕粉 2020-04-30 19:02:04

同学你好，不一样是因为伪元素设置了定位。建议同学按照老师回复的操作试一下呢，先把li标签的行高去掉，再把after伪元素的定位值去掉，比较下原始位置在哪，添加行高和定位以后又在哪。

祝学习愉快~

提问者 Aurora_Meteor #1

试了一下发现，不管after伪元素有没有绝对定位，实际显示的位置都是在控制台显示的位置的下方，这是after伪元素的特性？所以虽然绝对定位加上top:0让它和li顶部对齐了，但是因为这个特性就导致它实际显示的位置看起来和li内的文字平行？实际元素的高度位置并不平行，只是视觉显示是平行的？

2020-04-30 19:37:49

好帮手慕粉 2020-04-30 13:53:58

同学你好，是受到了li元素行高的影响，我们可以把行高去掉看下：

祝学习愉快~

提问者 Aurora_Meteor #1

不是很明白呢，元素在页面中显示的位置不是应该都和控制台查看到的是一样的么？而且li的行高和after元素的高度也不一样的呀。查看li的文字时控制台显示的位置就和实际的一样，after却不一样，但是after实际的位置高度却和文字一样？after是li的伪元素不是文字的伪元素呀，为什么会这样呢

2020-04-30 15:11:29

相似问题

请问为什么要设置固定定位?li不是已经这么设置了吗？

老师，检查我的代码哪里出错误了？是不是右边定位的问题？定位了但是没效果！

中间内容的右侧如何设置呢？一直设置不了。还有其他的代码对吗？有没有可以改善的地方

老师说我白云应该从最右侧出现

图片之间有莫名白条？

登录后可查看更多问答，登录/注册

3.WebAPP开发与小程序

参与学习人
提交作业 622 份
解答问题 6815 个

微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。

本课精华内容

问答作业

代码分享-模仿高德官网效果做的

129 1

为什么图片这么大

27 15

老师帮我看下为什么谷歌浏览器点不了进度条没次点击都会重新播放用火狐浏览器就是可以的

34 14

这两个公式怎么推导出来的？

40 13

laoshi老师

57 13

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载