css - Margin-top vs display block - 不能同时工作 - CSS

Question

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

我需要一个链接覆盖所有行，而不仅仅是文本。

如果我不使用float，链接在所有行上都能正常工作，但我无法建立margin-top。如果我使用 float，margin-top 可以正常工作，但链接仅适用于文本。

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

这是我的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/