Question

我正在使用WordPress的自定义主题，我的注释格式存在问题。回复评论显示评论元数据（用户名和日期）之前的正文。这很奇怪，因为在HTML中，正文显然是在元数据之后。

以下是Wordpress生成的HTML代码：

<div class="comment-list">
    <div id="comment-4" class="comment even thread-even depth-1 parent">
        <article id="div-comment-4" class="comment-body">
            <footer class="comment-meta">
                <div class="comment-author vcard">
                    <b class="fn">John Seibert</b> <span class="says">says:</span>                  
                </div><!-- .comment-author -->
                <div class="comment-metadata">
                    <a href="http://howtolearnalanguagelikeaboss.com/introduction/#comment-4">
                        <time datetime="2015-12-08T01:40:19+00:00">December 8, 2015 at 1:40 am</time>
                    </a>
                    <span class="edit-link"><a class="comment-edit-link" href="http://howtolearnalanguagelikeaboss.com/wp-admin/comment.php?action=editcomment&#038;c=4">Edit</a></span>                    
                </div><!-- .comment-metadata -->
            </footer><!-- .comment-meta -->
            <div class="comment-content">
                <p>Hi Dave,</p>
                <p>Nice web site.</p>
                <p>Dad</p>
            </div><!-- .comment-content -->
            <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://howtolearnalanguagelikeaboss.com/introduction/?replytocom=4#respond' onclick='return addComment.moveForm( "div-comment-4", "4", "respond", "6" )' aria-label='Reply to John Seibert'>Reply</a></div>           
        </article><!-- .comment-body -->
        <div id="comment-7" class="comment odd alt depth-2">
            <article id="div-comment-7" class="comment-body">
                <footer class="comment-meta">
                    <div class="comment-author vcard">
                        <b class="fn">Dave Seibert</b> <span class="says">says:</span>                  
                    </div><!-- .comment-author -->
                    <div class="comment-metadata">
                        <a href="http://howtolearnalanguagelikeaboss.com/introduction/#comment-7">
                            <time datetime="2015-12-31T21:42:56+00:00"> December 31, 2015 at 9:42 pm                            </time>
                        </a>
                    </div><!-- .comment-metadata -->
                </footer><!-- .comment-meta -->
                <div class="comment-content">
                    <p>Thanks, Dad!</p>
                </div><!-- .comment-content -->
                <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://howtolearnalanguagelikeaboss.com/introduction/?replytocom=7#respond' onclick='return addComment.moveForm( "div-comment-7", "7", "respond", "6" )' aria-label='Reply to Dave Seibert'>Reply</a></div>           
            </article><!-- .comment-body -->
        </div><!-- #comment-## -->
    </div><!-- #comment-## -->
</div><!-- .comment-list -->

然而，这是与内容“谢谢，爸爸！”一起呈现的。之前“Dave说”和日期，如下所示：screenshot of metadata following content。

我意识到这可能是一个浮动问题，但我对此部分影响的唯一问题如下：

.comment-author { font-size: 1.7rem; line-height: 2.1rem; float: left; } .comment-metadata { font-size: 1.7rem; line-height: 2.1rem; float: right; font-weight: 300; font-style: italic; } div.comment { padding-bottom: 4em; } h2.comments-title { border-style: solid; border-width: 1px 0 0 0; margin-top: 2em; padding-top: .5em; padding-bottom: 1em; } div.reply { font-size: 1.7rem; line-height: 2.1rem; float: right; border-style: solid; padding: .1em .3em .1em .3em; border-width: .1em; }

取消浮动.comment-author类没有帮助，虽然取消隐藏.comment-metadata和div.comment 帮助，但这会大大改变设计，从那时起，这些元素将被左对齐。任何帮助将不胜感激。

Answer 1

你是对的，因为这是一个浮动的问题，但错误的元素。尝试取消浮动.reply。您可以使用overflow: auto;类.comment-body或通过在每条评论的底部添加边距来解决此问题。

Wordpress对评论正文的回复显示在元数据

1 个答案: