熟悉的站长们都知道，对 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

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

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