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

我在处理wordpress主题时遇到了一些问题

我正在用CSS设置注释的样式，使其看起来像下图，您可以看到列表项

注释内容

中有3个DIV，分别用于化身用户图像、连接注释和化身的箭头图像以及注释本身

我遇到的问题是子注释，它们类似于

嵌套的子ul列表，它位于

我的注释主列表项中

因此，在下图中，您了解了注释列表的外观，然后您看到我在子注释周围绘制的红色框，您可以看到它们嵌套在主注释框中

我需要以某种方式将这些子评论放在主评论框之外，以便每个子评论都有自己的框

我不知道如何实现这一点，因为子注释仍然是嵌套的，我只能为此更改CSS

理想情况下，我希望使子注释看起来与主注释完全相同，只是它们将在主注释下面缩进更多

如果您有任何想法如何做到这一点，我真的可以使用帮助，我有一个涉猎（就像JSFIDLE，但是CSS更酷）页面，这里有相关的代码

只需关闭Wordpress中的嵌套注释即可。在设置、讨论、启用线程（嵌套）注释中，使用CSS可以删除项目符号和填充，使其与上面的主注释对齐。只需使用：

padding:none;
list-style:none;

在包装孩子评论的li div上

但是最好的方法是像Matt在下面所说的那样。
如果出于某种原因需要保留线程注释，可以从设置注释框而不是列表项的样式开始：

.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;
}

这应该可以让您了解其中的一部分，然后您可以根据自己的喜好对子注释进行样式设置。
不要将父注释作为一个整体进行样式设置，请将其包装在
div
中；我不是wordpress大师，但你应该能够更改评论模板…在drupal中，你可以以任何你喜欢的方式定义评论模板。我不知道你希望评论看起来像什么，你能澄清一下吗？