Question

嗨我在我的wordpress评论列表中有这个html标记 enter image description here 第一条评论第二条评论第一个回复评论二第三评论这是我的css代码

this is my css code 

ol.commentslist,
ol.commentslist li article header ul,
ol.commentslist ul.children {
list-style: none;
}
ol.commentslist h4 {
background: #272322;
padding: .5em 5px;
color: #fff;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 3px;
margin-right: 40px;
}
ol.commentslist figure img {
box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px;
border-radius: 5px;
}
ol.commentslist li article {
background: #FFF;
padding: 10px;
display: block;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
.border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
margin-bottom: 10px;
border-color: rgb(238, 238, 238) rgb(221, 221, 221) rgb(187, 187, 187);
border-width: 1px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px;
position: static;
visibility: visible;
}
ol.commentslist li article header {
border-bottom: 1px solid rgba(0, 0, 0, 0.14902);
padding-bottom: 10px;
}
ol.commentslist li article p {
padding-top: 10px;
text-align: justify;
}
ol.commentslist li article header ul {
padding-left: 0;
}
ol.commentslist li article header ul li {
display: inline-block;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-weight: bold;
text-decoration: underline;
}
ol.commentslist li article header ul li:last-child {
float: right;
}
ol.commentslist li article a.comment-reply-link {
float: right;
background: #F2F2F2;
padding: 7px;
text-decoration: underline;
border: 1px solid #d7d7d7;
color: #777;
position: relative;
bottom: -10px;
right: -10px;
}

ol.commentslist ul {
padding-left: 0;
}
ol.commentslist ul.children li {
margin-top: -10px;
}
ol.commentslist ul.children li article.even {
background: #FAFAFA;
}
ol.commentslist ul.children li article.odd {
background: #d7d7d7;
}

我的问题是：我如何将children类放在container2类中？子类是我想要的任何人重播评论时直接显示父评论中的回复。

Answer 1

你的标记是绝对错误的，你需要在任何OL或UL元素中使用LI，它是强制性的。所以你的标记应该是这样的：

<ol class='commentlist'>
    <li class='container1'>First Comment</li>
    <li class='container2'>Second Comment</li>
    <li class='children'>
        <ul>
            <li>First Reply For Comment Two</li>
            <li>First Reply For Comment Two</li>
            <li>First Reply For Comment Two</li>
            <li>First Reply For Comment Two</li>
        </ul>
    </li>
    <li class='container3'>Third Comment</li>
</ol>

我不确定在那之后你是什么意思，如果你不想有填充/边距，只需添加：

.children ul{padding:0; margin:0}

否则，执行相反的操作（即：添加您想要的边距和填充，尽管使用适当的标记，您默认会有一些填充和边距）

修改

为了按照您想要的方式执行此操作，将回复嵌套在注释中，您只需进行一些小改动：

HTML现在就像这样：

<ol class='commentlist'> <li class='container1'>First Comment</li> <li class='container2'>Second Comment <ul class='children'> <li>First Reply For Comment Two</li> <li>First Reply For Comment Two</li> <li>First Reply For Comment Two</li> <li>First Reply For Comment Two</li> </ul> </li> <li class='container3'>Third Comment</li> </ol>

和CSS这样：

ul.children{/* whatever style you need */}

我默认会保留填充和边距，因此您可以一眼看到这些回复，但当然取决于您。但是，我建议您在li祖先的内部元素中添加某种包含块，否则您将对其进行样式设置有问题。像这样：

<li class='container2'><div class="comment_entry">Second Comment</div> <ul class='children'> <li>First Reply For Comment Two</li> <li>First Reply For Comment Two</li> <li>First Reply For Comment Two</li> <li>First Reply For Comment Two</li> </ul> </li>

这样，如果你想设置注释的样式而不是回复，你可以简单地使用CSS定位.comment_entry类

如何使用CSS将ul列表放在外部div中

1 个答案: