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 class postmeta中正确对齐我的约会，作者，类别，评论文本。我认为我的CSS有错误。

Answer 1

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

这是DEMO

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>

发布信息锚文本未在中心对齐

1 个答案: