html - 发布信息锚文本未居中对齐

Question

锚文本未在 div 类 postmeta 中间对齐：

我的html：

<div class="blog">
<div class="postmeta">
             <span class="date"><a>12/12/2012</a></span>
             <span class="author"><a>stackoverflow</a></span>
             <span class="category"><a>csshtml</a></span>
             <span class="comments"><a>no comments</a></span>
</div>
</div>

我的 CSS：

.blog .postmeta {
border: 1px solid #272727;
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #9e9e9e;
border-radius:4px;
background:#202020;
display:block;
padding:10px;
}

.blog .postmeta  span{
 padding:5px 10px 5px 25px;

}

.date{
 color:red;
 float:left;
 text-decoration:none!important;
 background: url("images/date.gif") no-repeat scroll 0 0 transparent;}


.category,.author{
  float:left;
  text-decoration:none!important;
}
.postmeta .author {
  background: url("images/author.gif") no-repeat scroll 0 0 transparent;}

.comments{
  float:right;
}
.postmeta .comments {
    background: url("images/comments.gif") no-repeat scroll 0 0 transparent;}

谁能帮我在 div 类 postmeta 中正确对齐我的日期、作者、类别、评论文本。我认为我的 css 中有错误。

Answer 1

您没有清除 div。一种方法是使用clearfix。

这是一个演示

CSS：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

HTML

<div class="postmeta clearfix">
    <span class="date"><a>12/12/2012</a></span>
    <span class="author"><a>stackoverflow</a></span>
    <span class="category"><a>csshtml</a></span>
    <span class="comments"><a>no comments</a></span>
</div>