如何优雅的加这条杠？

2021-01-25

原创字数统计: 263 | 阅读时长: 1分

QQ截图20210126155629

如题。

方案1：适用于元素之间的padding都一样的情况。

<ul class="flex_box friend_link">
    <li><a href="">加入我们</a>|</li>
    <li><a href="">新浪官方微博</a>|</li>
    <li><a href="">复仇者联盟</a>|</li>
    <li><a href="">法律制裁</a>|</li>
    <li><a href="">消费者协会</a>|</li>
    <li><a href="">举报热线</a>|</li>
    <li><a href="">采购招标信息</a></li>
</ul>

直接在<a>标签之外，<li>标签结束前加|,通过<a>标签的padding横向调整间距，而|的宽度，颜色等通过<li>标签进行调整。

/* 这里有所省略，竖杠的样式可以通过<li>去调整 */
.flex_box{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.friend_link{
	margin-bottom: 10px;
}

本文作者： 本该如此
本文链接： https://anyway521.github.io/post/c1dbffe4.html
最后更新： 2021年01月26日 18:00:22
版权声明： 博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议进行许可，转载请注明出处！

jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true