I try to use display="table-cell"
and vertical-align="middle"
to display the date, the name and the edit link next to the avatar in comments.php in wordpress.
That's the code I'm using:
.commentlist { padding: 0; margin: 0; margin-left: 0; } .comment { margin-left: 0; list-style: none; } .fn, .says, .comment-awaiting-moderation { font-size: 1em; font-family: sans-serif, Arial; color: #2A2A2A; font-style: normal; } #cancel-comment-reply-link { font-size: 0.9em; font-family: sans-serif, Arial; color: #828282; text-decoration: none; -o-transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; transition: .3s; margin-left: 20px; } #cancel-comment-reply-link:hover { color: #2A2A2A; } .vcard { height: 74px; display: table; } .fn { padding-left: 10px; display: table-cell; vertical-align: middle; } .comment-author { margin-bottom: 0.4em; } .commentmetadata { margin-bottom: 1.6em; display: table-cell; vertical-align: middle; } .says { display: table-cell; vertical-align: middle; } .comment-meta, comment-edit-link { display: table-cell; vertical-align: middle;}
<ol class="comment-list"> <li class="comment byuser comment-author-nadine bypostauthor even thread-even depth-1 parent" id="comment-2"> <div id="div-comment-2" class="comment-body"> <div class="comment-author vcard"> <img alt='' src='http://0.gravatar.com/avatar/3facb3506c6c3f0d12efbf2f6d97a8e1?s=74&d=mm&r=g' srcset='http://0.gravatar.com/avatar/3facb3506c6c3f0d12efbf2f6d97a8e1?s=148&d=mm&r=g 2x' class='avatar avatar-74 photo' height='74' width='74' /> <cite class="fn">nadine</cite><span class="says"></span> </div> <div class="comment-meta commentmetadata"><a href="http://backpackfamily.de/2016/05/beitrag-4/#comment-2"> 21. Mai 2016 um 19:50</a> <a class="comment-edit-link" href="http://backpackfamily.de/wp-admin/comment.php?action=editcomment&c=2">(Bearbeiten)</a> </div> <p>Hallo123</p> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://backpackfamily.de/2016/05/beitrag-4/?replytocom=2#respond' onclick='return addComment.moveForm( "div-comment-2", "2", "respond", "33" )' aria-label='Antworte auf nadine'>Antworten</a></div> </div>
How can I get the date and the edit ("bearbeiten" in German) links next to the name so that it looks like:
name date edit
Thank you!
Is this what you are looking for ( https://jsfiddle.net/qqojuuow/1/ )?
<ol class="comment-list">
<li class="comment byuser comment-author-nadine bypostauthor even thread-even depth-1 parent" id="comment-2">
<div id="div-comment-2" class="comment-body">
<div class="comment-author vcard">
<img alt='' src='http://0.gravatar.com/avatar/3facb3506c6c3f0d12efbf2f6d97a8e1?s=74&d=mm&r=g' class='avatar avatar-74 photo' height='74' width='74' />
<div id="outer">
<cite class="fn">nadine</cite><span class="says"></span>
<div class="comment-meta commentmetadata"><a href="http://backpackfamily.de/2016/05/beitrag-4/#comment-2">21. Mai 2016 um 19:50</a> <a class="comment-edit-link" href="http://backpackfamily.de/wp-admin/comment.php?action=editcomment&c=2">(Bearbeiten)</a> </div>
</div>
<p>Hallo123</p>
<div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://backpackfamily.de/2016/05/beitrag-4/?replytocom=2#respond' onclick='return addComment.moveForm( "div-comment-2", "2", "respond", "33" )' aria-label='Antworte auf nadine'>Antworten</a></div>
</div>
</div>
</li>
And css:
.commentlist {
padding: 0;
margin: 0;
margin-left: 0;
}
.comment {
margin-left: 0;
list-style: none;
}
.fn,
.says,
.comment-awaiting-moderation {
font-size: 1em;
font-family: sans-serif, Arial;
color: #2A2A2A;
font-style: normal;
}
#cancel-comment-reply-link {
font-size: 0.9em;
font-family: sans-serif, Arial;
color: #828282;
text-decoration: none;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
margin-left: 20px;
}
#cancel-comment-reply-link:hover {
color: #2A2A2A;
}
.vcard {
height: 74px;
display: table;
}
#outer {
height: 74px;
background-color: black;
display: block;
float: left;
padding-left: 10px;
line-height: 74px;
}
.avatar {
float: left;
}
p {
display: block;
}
.comment-author {
margin-bottom: 0.4em;
}
.commentmetadata {
margin-bottom: 1.6em;
display: inline;
}
.reply
To get rid of the #outer ( https://jsfiddle.net/qqojuuow/3/ ):
.vcard {
height: 74px;
display: table;
line-height: 74px;
}
.fn {
margin-left: 10px;
}
Why all this mess with display: table-cell
? You could use display: inline-block
and vertical-align: middle
to achieve what you want.
Here it is without changing the HTML. I removed all of the "display:table-cell", and replaced it with one "display:inline-block" at the bottom. Please let me know if you have any questions.
CSS
.commentlist {
padding: 0;
margin: 0;
margin-left: 0;
}
.comment {
margin-left: 0;
list-style: none;
}
.fn,
.says,
.comment-awaiting-moderation {
font-size: 1em;
font-family: sans-serif, Arial;
color: #2A2A2A;
font-style: normal;
}
#cancel-comment-reply-link {
font-size: 0.9em;
font-family: sans-serif, Arial;
color: #828282;
text-decoration: none;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
margin-left: 20px;
}
#cancel-comment-reply-link:hover {
color: #2A2A2A;
}
.vcard {
height: 74px;
}
.fn {
padding-left: 10px;
vertical-align: middle;
}
.comment-author {
margin-bottom: 0.4em;
}
.commentmetadata {
margin-bottom: 1.6em;
}
img, .inline{
display: inline-block;
vertical-align: middle;
}
HTML
<ol class="comment-list">
<div id="div-comment-2" class="comment-body">
<div class="inline">
<img alt='' src='http://0.gravatar.com/avatar/3facb3506c6c3f0d12efbf2f6d97a8e1?s=74&d=mm&r=g' srcset='http://0.gravatar.com/avatar/3facb3506c6c3f0d12efbf2f6d97a8e1?s=148&d=mm&r=g 2x' class='avatar avatar-74 photo' height='74' width='74'
/> <cite class="fn">nadine</cite><span class="says"></span> </div>
<div class="inline"><a href="http://backpackfamily.de/2016/05/beitrag-4/#comment-2">
21. Mai 2016 um 19:50</a> <a class="comment-edit-link" href="http://backpackfamily.de/wp-admin/comment.php?action=editcomment&c=2">(Bearbeiten)</a>
</div>
<p>Hallo123</p>
<div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://backpackfamily.de/2016/05/beitrag-4/?replytocom=2#respond' onclick='return addComment.moveForm( "div-comment-2", "2", "respond", "33" )' aria-label='Antworte auf nadine'>Antworten</a></div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.