边距顶部与显示块 - 无法同时工作 - CSS

Question

应用程序 （RoR） 显示一组包含帖子信息的行。每行的标题左对齐，日期右对齐。

我需要有一个链接适用于所有行，而不仅仅是文本。

如果我不使用 float，链接可以在所有行上正常工作，但我无法建立边距顶部。如果我使用 float，则边距顶部工作正常，但链接仅适用于文本。

我不明白问题是什么。有什么想法吗？

这是我的 css：

.post {
    margin-left: auto;
    margin-right: auto;
    width:  900px;
    height: 40px;
    border-bottom: 1px solid #BDBDBD;
}
.post a {
    display: block;
    text-decoration: none;
 } 
.post a span.title{
    float: left;
    margin-top: 7px;
}    
.post a span.date{
  float: right;
  margin-top: 7px;
}   

Answer 1

我假设你的html结构是这样的：

<div class="post">
    <a href="#">
        <span class="date">date</span>
        <span class="title">title</span>
    </a>
</div>

注意：我向上移动了date，title向下移动，因为我们将使第一个向右浮动。然后，您可以根据需要使用margin或padding。

.post {
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    border-bottom: 1px solid #BDBDBD;
}
.post a {
    display: block;
    text-decoration: none;
    padding: 10px 0;
}
.post a span.date {
    float: right;
}

演示：http://jsfiddle.net/42vdh6bL/