0

嗨，我在我的 wordpress 评论列表下面有这个 html 标记 在此处输入图像描述 第一个评论第二个评论第一个回复评论第二个第三个评论，这是我的 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课堂上？当任何人重播评论时，子类是我想要的回复评论，直接在父评论中显示回复。

4

1 回答 1

0

您的标记绝对错误，您需要在任何 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>

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

于 2014-09-06T22:23:27.543 回答