Html 显示=";表格单元格“;对于垂直对齐,不使用';行不通
我尝试使用Html 显示=";表格单元格“;对于垂直对齐,不使用';行不通,html,css,wordpress,wordpress-theming,css-position,Html,Css,Wordpress,Wordpress Theming,Css Position,我尝试使用display=“table cell”和vertical align=“middle”在wordpress的comments.php中显示头像旁边的日期、名称和编辑链接 这就是我使用的代码: .commentlist{ 填充:0; 保证金:0; 左边距:0; } .评论{ 左边距:0; 列表样式:无; } .fn, .说, .评论待审核{ 字号:1em; 字体系列:无衬线,Arial; 颜色:#2A2A2A; 字体风格:普通; } #取消评论回复链接{ 字号:0.9em; 字体系列
display=“table cell”
和vertical align=“middle”
在wordpress的comments.php中显示头像旁边的日期、名称和编辑链接
这就是我使用的代码:
.commentlist{
填充:0;
保证金:0;
左边距:0;
}
.评论{
左边距:0;
列表样式:无;
}
.fn,
.说,
.评论待审核{
字号:1em;
字体系列:无衬线,Arial;
颜色:#2A2A2A;
字体风格:普通;
}
#取消评论回复链接{
字号:0.9em;
字体系列:无衬线,Arial;
颜色:"828282 ;;
文字装饰:无;
-o-转变:.3s;
-ms转换:.3s;
-moz跃迁:.3s;
-webkit转换:.3s;
过渡:.3s;
左边距:20px;
}
#取消评论回复链接:悬停{
颜色:#2A2A2A;
}
vcard先生{
高度:74px;
显示:表格;
}
.fn{
左侧填充:10px;
显示:表格单元格;
垂直对齐:中间对齐;
}
.评论作者{
边缘底部:0.4em;
}
.评论元数据{
边缘底部:1.6em;
显示:表格单元格;
垂直对齐:中间对齐;
}
.说{
显示:表格单元格;
垂直对齐:中间对齐;
}
.comment元,注释编辑链接{显示:表格单元格;垂直对齐:中间;}
纳丁
你好
这就是你要找的吗()
要摆脱#外部():
为什么所有这些都会弄乱显示:表格单元格?您可以使用
display:inline block
和vertical align:middle
来实现所需功能
在这里,它没有更改HTML。我删除了所有的“display:table cell”,并将其替换为底部的一个“display:inline block”。如果你有任何问题,请告诉我 CSS HTML
纳丁
你好
是的,它应该是这样的。但问题是这并不存在,因为这只是输出。如何使用给定的html解决此问题?看起来不错,但它仅适用于最后一条注释,所有其他注释都与上面的注释类似。我不确定是否理解您面临的问题。下面是另一个包含多个<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>
.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
.vcard {
height: 74px;
display: table;
line-height: 74px;
}
.fn {
margin-left: 10px;
}
.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;
}
<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>