CSS：Div的位置

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输出，但这不是一个选项。

- user966585

---

您可以通过仪表板上的“编辑”菜单直接编辑HTML。仪表板>外观>编辑。然后选择comments.php文件，找到显示评论和评论作者的HTML，并将显示作者、日期/编辑和回复的HTML移动到同一行。 - joshmax

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

然后给.reply添加position:absolute;。您可能需要调整这些数字。

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

---

编辑

根据@Diodeus的评论，您可以尝试使用绝对定位，直到作者的姓名很长，这将强制“回复”位于通常在其左侧的文本顶部。一件事要做的是从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/

- Jason Gennaro

---

棘手的部分是他想要“回复”移到编辑旁边。 - James Montagne

你可以尝试使用绝对定位，但如果作者的名字很长，那么“回复”按钮将会覆盖原本在其左侧的文本。 - Diodeus - James MacFarlane

真的 @Diodeus。我认为有两个选择。一是限制作者名称的长度，或者从DOM中删除回复并重新插入到正确的位置以便轻松样式化。 - Jason Gennaro

这是WordPress - 如果您可以限制作者名称，您可以编辑代码并重新排列HTML。 - Diodeus - James MacFarlane

答案已修订，包括 jQuery 修复 @Diodeus - Jason Gennaro

Answer 2

您可以通过添加 "float：left" 来更改项目的位置，但在此情况下这将不起作用，因为您需要先看到“回复”的出现，然后才是“评论文本”。CSS 无法重新排列元素的顺序。

像这样“被逼入绝境”时，您始终可以使用 jQuery 在客户端上重新编写 HTML。虽然有些残酷，但有时那是唯一的选择。

- Diodeus - James MacFarlane

Answer 3

将此添加到您的css中。

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

这里是jsfiddle

编辑：看起来我错过了回复按钮。它可以绝对定位在右上角。使用：

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

但如果文本太长，那么这可能会重叠。否则，您将不得不更改HTML。

- corymathews

---

他希望在那里也有回复链接。 - brenjt

Answer 4

这将非常困难，有一种方法，但非常有限。如果您可以保证实际评论正文的像素高度（我想您不能），那么您可以内联元素，将reply元素从流中取出（将其定位在容器底部），并在容器上设置填充以强制其向下。请参见this fiddle的示例。它实现了所需的效果，但不适用于多行注释。

- Clive