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

2018-12-1912:13:50 4 227
摘要

虽然明月不懂CSS/JS,但还是比较喜欢收集和使用CSS/JS代码的,有些代码对博客文章也确实有美化的实用效果,对文章浏览体验提升有不少帮助!

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

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

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

  1. /*列表项目:元素宽度未知,且所有元素都在一个容器*/
  2. .new_wrapper {
  3. width: 100%;
  4. padding: 15px;
  5. margin: 20px auto;
  6. <!-- border: 2px solid rgb(0,0,255); -->
  7. }
  8. .new_container {
  9. display: flex;
  10. flex-wrap: wrap;
  11. margin-bottom: -20px;
  12. margin-right: -30px;
  13. color: rgb(255, 255, 255);
  14. }
  15. .new_item {
  16. display: inline-block;
  17. margin-right: 30px;
  18. margin-bottom: 20px;
  19. padding: 5px 10px;
  20. font-size: 20px;
  21. border-radius: 5px / 5px;
  22. background: rgb(103, 164, 243);
  23. }

其中.new_wrapper 里面的width 赋值可以根据需要来自行调整,如果需要自适应就以百分比赋值,如果需要指定宽度就赋值像素值即可,其他参数都可以根据自己需要来调整。

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

  1. <div class="new_wrapper">
  2. <div class='new_container'>
  3. <div class='new_item'>项目 12345</div>
  4. <div class='new_item'>项目 ABCDEFS</div>
  5. <div class='new_item'>项目 KLJLO</div>
  6. <div class='new_item'>项目 lsielsielsie</div>
  7. <div class='new_item'>项目 545744433</div>
  8. <div class='new_item'>项目 8754323222</div>
  9. <div class='new_item'>项目 009009089909889</div>
  10. <div class='new_item'>项目 ABCDEFS</div>
  11. <div class='new_item'>项目 KLJLO</div>
  12. <div class='new_item'>项目 lsielsielsie</div>
  13. <div class='new_item'>项目 545744433</div>
  14. <div class='new_item'>项目 8754323222</div>
  15. <div class='new_item'>项目 009009089909889</div>
  16. </div>
  17. </div>

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

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

历史文章推荐:

  • 打赏明月一下下
  • 多谢您的赞赏!
  • weinxin
  • 本博客小程序
  • 微信内浏览本博客
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:4   其中:访客  2   博主  2

    • 弥雅尔尔 4

      哈哈,明儿弥雅试试!

      • boke112导航 9

        这个效果的话,感觉你完全可以参考begin主题本身文章页中的那个多个下载按钮,感觉很类似

          • 明月登楼  博主

            @boke112导航 不行,主题下载按钮的CSS样式会换行的!我试过!并且,我的编辑器里Begin集成的增强按钮都不见了!囧!