使用CSS设置嵌套子无序列表的样式

Question

我在使用wordpress主题时遇到了一些麻烦。

我使用CSS设置注释样式如下图所示，您可以看到列表项<li>comment stuff</li>内有3个DIV用于阿凡达用户图像，箭头图像连接注释和阿凡达，以及评论本身的DIV。

我遇到的问题是Child评论，它们就像<ul class="child"><li></li></ul>嵌套子UL列表，INSIDE我的评论主列表项。

因此，在下面的图片中，您可以了解评论列表的外观，然后您会看到我在Child评论中绘制的RED框，您可以看到它们嵌套在主评论框中。

我需要以某种方式在主评论框之外获取这些子评论，以便每个儿童评论都可以拥有它自己的框。

我无法弄清楚如何实现这一点，因为孩子的评论仍然是NESTED，我只能为此改变CSS。

理想情况下，我想让孩子的评论看起来与主要评论完全一样，除非他们会在主要评论的下方缩进。

如果您有任何想法如何做到这一点我真的可以使用帮助，我有一个Dabblet（就像JSFiddle但很酷的CSS）页面这里有问题代码http://dabblet.com/gist/1555382

Answer 1

如果由于某种原因你需要保留线程评论，你可以从评论框而不是列表项的样式开始：

.commentlist > li.comment {
    position: relative;
    width: 400px;
}

.c-body {
    padding: 9px;
    border-image: initial;
    margin: 20px 0 30px 0;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
    background-color: white;
}

这应该让你成为一部分，从那里你可以根据自己的喜好设计儿童评论。

Answer 2

只需关闭Wordpress中的嵌套评论即可。它位于设置，讨论，启用线程（嵌套）注释

Answer 3

使用CSS你可以删除Bullet点和填充以使它们与上面的主要注释对齐，只需使用：

padding:none;
list-style:none;

在包裹孩子评论的li div上。

但最好的方式就像马特在下面说的那样。