首页 » 建站手册 » Single主题优化评论嵌套css样式教程

Single主题优化评论嵌套css样式教程

谷歌已收录,更新于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
    }
}

后续

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

一个只会魔改主题,而不会制作主题的站长,专业扒各种网站的各种样式。希望每一位来到这里的访客,都能拿到你们需要的资源!

发表评论

最近动态查看

    近日可能会更新很多有实用价值的Chrome扩展程序,大佬们亦可推荐各种脚本或扩展程序哈。
返回主页看更多
赏杯咖啡给站长 支付宝 扫一扫