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;
}

DEMO： http://jsfiddle.net/42vdh6bL/

保证金顶部与显示屏块 - 无法兼顾两者 - CSS

1 个答案: