span是行内元素
来源:4-1 课程总结
情分的小前端
2020-11-11 14:30:31
# 具体遇到的问题
请问一下这里为什么使用span呢行内元素不能独占一行,但切图上面是图片在上面,文字在下面,这个时候不应该使用div吗
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
在这里输入代码,可通过选择【代码语言】
<ul>
<li>
<a href="">
<img src="images/icon_jzxz.png" alt="" srcset="">
<span>就诊须知</span>
</a>
</li>
<li>
<a href="">
<img src="images/icon_jylc.png" alt="" srcset="">
<span>就医流程</span>
</a>
</li>
<li>
<a href="">
<img src="images/icon_zjjs.png" alt="" srcset="">
<span>专家介绍</span>
</a>
</li>
<li>
<a href="">
<img src="images/icon_ksjs.png" alt="" srcset="">
<span>科室介绍</span>
</a>
</li>
<li>
<a href="">
<img src="images/icon_ybjy.png" alt="" srcset="">
<span>医保就医</span>
</a>
</li>
<li>
<a href="">
<img src="images/icon_jktj.png" alt="" srcset="">
<span>健康体检</span>
</a>
</li>
</ul>
突出显示
2回答
同学你好, 可能是老师的书写习惯,后面学习css后,老师将span转成了块级元素,让它默认单独占据一行,在图标下面显示了。同学自己练习时,也可以替换成div包裹文字哦。
文字可以使用span包裹,可以使用div包裹,没有固定的要求,灵活应用所学知识实现效果就可以。
祝学习愉快~
曼曼喜欢你
2020-11-14
额,我说两句我的个人看法。
span是行内元素,div是块级元素。按理说要实现ui中的效果,应该用div。
但是呢,也可以在html用span,然后在css中用display:block;将span改为块级元素显示。
所以我估计,后面的课程,要么老师会把span改为div,要么就会把span的display设置为block。
我从头看老师讲课的风格,个人认为还是比较务实的。老师先将html,然后反复提醒css是在后面去讲解学习。而行内元素、块级元素,或inline-block(内联元素)都是在css部分学习的,所以我估计这才是为什么老师在当前课程中没有注重讲解此处该用span还是div这种细节问题。
如果我的猜测是正确的,那么上面这位@好帮手慕赵就已经解答了你的问题。
相似问题
回答 1