最后更新于2018年12月27日; 如遇到问题,请留言及时通知站长; 欢迎加入 三生三世,讨论各种问题!

说明

网站做起来,慢慢的就有了访客,人数也就多了。当你是一个技术性网站时,往往访客会评论问你各种问题,你会回复,访客再评论。这样,就出现了多层嵌套式回复。往往我们的主题,在电脑端看着还好,一旦到了手机端,这些嵌套到第五层基本就废了。今天写这篇教程,就是为了使我们的多层评论嵌套,在手机端也能完美显示。

展示

这部分,我们先来看看未优化与优化过的评论嵌套样式区别,如下图所示。我们可以看到,当4层嵌套时,样式基本错乱;当5层嵌套时,评论基本就是一行一个字了。经过优化,样式很完美。

修改前修改后
请输入图片描述请输入图片描述

CSS代码

将以下代码加到你的自定义css中,即可完成优化。

@media only screen and (max-width:800px) {
    .comment-children .comment-content,.comment-children .comment-list .comment-meta,.comment-children .comment-list li:last-child,.comment-children .comment-reply {
        padding-left: 20px
    }

    .comment-children .avatar {
        left: -20px
    }
}

后续

当然,其他主题如果有类似问题,可以留言评论,互相讨论下。

- The End -