如何做出如下效果?
通过ul,ul中可以包含多个li
每个li都是块级元素,独占一行,如果要做出如图效果,需要让li浮动(这里没有定义宽度,让宽度根据内容自动调节)
从图1可以看出,每个元素之间都有距离,这里通过给li的子元素a添加padding撑开(不使用和添加宽度),但由于a是行内元素,所以需要先转换为块级元素(还有一种方式,见下一篇文章)
从图1可以看到最后一个元素后面还有一个符号,可以通过给最后一个元素添加after伪元素(将字体图标引入),如果元素之间有距离,可以考虑两种方式:一、在after伪元素中添加padding/margin;二、使用定位(子绝父相或其他)
注意:after伪元素是最后一个元素的子元素(伪元素一定要有content)
最后效果如图