分享个 WordPress 文章中 CSS 列表项布局技巧

羊毛党之家 分享个 WordPress 文章中 CSS 列表项布局技巧  https://yangmaodang.org 羊毛党之家 分享个 WordPress 文章中 CSS 列表项布局技巧  https://yangmaodang.org

熟悉的站长们都知道,对 CSS/JS 是“纯小白”水平,凡是涉及到 CSS/JS 的时候一般只会“复制”、“粘贴”而已,直至现在都是看到 CSS/JS 代码基本就“晕菜”了,估计这辈子没治了都!每次碰到 CSS/J 代码问题的时候,要不是放弃就是度娘、谷姐一番,找到了是万幸,找不到就放弃了。

最近需要给 WordPress 文章内添加一个『项目列表』,要求是每个项目的宽度未知且所有项目都在一个容器内,项目数量未知还需要可以在显示时排列整齐和自动换行以及自适应。经过一番谷姐蹂躏后中越算是找到了,进行了简单的修改后用到了文章中,效果还算满意,特分享出来!

将下面的 CSS 代码加入到 Begin 主题「定制风格」里:

/*列表项目:元素宽度未知,且所有元素都在一个容器*/
.new_wrapper {
width: 100%;
padding: 15px;
margin: 20px auto;

}
.new_container {
display: flex;
flex-wrap: wrap;
margin-bottom: -20px;
margin-right: -30px;
color: rgb(255, 255, 255);
}
.new_item {
display: inline-block;
margin-right: 30px;
margin-bottom: 20px;
padding: 5px 10px;
font-size: 20px;
border-radius: 5px / 5px;
background: rgb(103, 164, 243);
}
其中.new_wrapper 里面的width 赋值可以根据需要来自行调整,如果需要自适应就以百分比赋值,如果需要指定宽度就赋值像素值即可,其他参数都可以根据自己需要来调整。

然后在 WordPress 文中如果需要使用这个列表项目样式的时候,只需要参照如下格式再「源代码」模式里添加即可:

项目 12345
项目 ABCDEFS
项目 KLJLO
项目 lsielsielsie
项目 545744433
项目 8754323222
项目 009009089909889
项目 ABCDEFS
项目 KLJLO
项目 lsielsielsie
项目 545744433
项目 8754323222
项目 009009089909889

最后呈现的效果如下图所示:

羊毛党之家 分享个 WordPress 文章中 CSS 列表项布局技巧  https://yangmaodang.org

至此,基本上是满足自己的需要了,有机会可以再研究美化一下的,不过重在解决问题嘛!能用就可以了!虽然不懂 CSS/JS,但还是比较喜欢收集和使用 CSS/JS 代码的,有些代码对博客文章也确实有美化的实用效果,对文章浏览体验提升有不少帮助!

羊毛党之家 分享个 WordPress 文章中 CSS 列表项布局技巧  https://yangmaodang.org

微信扫一扫,分享到朋友圈

分享个 WordPress 文章中 CSS 列表项布局技巧
返回顶部