Question

我正在使用wordpress主题，它会自动生成注释的html输出。 HTML输出如下：

Author says:
August 30, 2011 at 6:43 pm  (Edit)
The comment text...
Reply.

我需要改变元素的位置。例如，我想在一行上显示作者，日期/编辑和回复。像：

Author says:    August 30, 2011 at 6:43 pm  (Edit)  Reply
The comment text...

如上所述，我无法更改HTML结构，因此我只需要使用CSS更改元素的位置。但是我可以这样做。我会批评任何帮助。

以下是生成的html：

<div class="comment-body" id="div-comment-33">

        <div class="comment-author vcard">
            <img width="48" height="48" class="avatar avatar-48 photo" src="http://i55.tinypic.com/21buau9.jpg" alt="">     

            <cite class="fn">
                <a class="url" rel="external nofollow" href="#">Author</a>
            </cite> 
            <span class="says">says:</span>     

        </div>

        <div class="comment-meta commentmetadata">
            <a href="#comment-33">August 30, 2011 at 6:43 pm</a>&nbsp;&nbsp;
            <a title="Edit comment" href="#" class="comment-edit-link">(Edit)</a>       
        </div>

        <p>The comment text...</p>

        <div class="reply">Reply</div>
</div>

jsFiddle链接：

http://jsfiddle.net/GLwfW/1/

PS。我知道我们可以通过在wordpress中添加自定义函数来更改HTML输出，但这不是一个选项。

Answer 1

您可以从前几个元素的display:inline-block;开始：

.comment-body{
    border:1px solid green;
    position:relative;
}

.comment-author, .comment-meta{
    display:inline-block;
}

.reply{
    position:absolute;
    top:34px;
    left:360px;
}

然后向position:absolute;提供.reply。你可能需要摆弄这些数字。

示例： http://jsfiddle.net/GLwfW/9/

修改

基于@ Diodeus的评论重新

你可以尝试绝对定位 - 直到作者姓名很长，然后将强制“回复”在文本的顶部通常在它的左边。

要做的一件事是detach来自DOM的回复并重新插入它。所以

新CSS

.comment-body{ border:1px solid green; position:relative; } .comment-author, .comment-meta, .reply{ display:inline-block; }

一些JS

var a = $('div.reply').detach(); a.appendTo('.comment-meta');

修订示例： http://jsfiddle.net/GLwfW/10/

Answer 2

您可以通过添加“float：left”来更改项目的位置，但在这种情况下这不起作用，因为您需要在“评论文本”之前显示回复。 CSS无法重置元素的ORDER。

当像这样“画到角落”时，你总是可以使用jQuery在客户端上重写HTML。野蛮但有时候这是唯一的选择。

Answer 3

将此添加到您的css

.comment-author, .comment-meta  { display:inline; }

以下是jsfiddle

编辑：Seens我错过了回复按钮。它可以绝对放在右上角。用：

.comment-body{ position:relative; }
.reply { right:0; top:0; position:absolute; }

但如果文本变长，那可能会与文本重叠。否则你将不得不改变html。

Answer 4

这将非常困难，有一种方法，但它非常有限。如果你可以保证实际评论体的像素高度（我认为你不能），那么你可以内联元素，将reply元素从流中取出（将它放在容器的底部）并在容器上设置填充以强制它。有关示例，请参阅this fiddle。它达到了预期的效果，但不能很好地适应多行评论。

CSS：Div的位置

4 个答案: