html - 简单的CSS float 问题

Question

我有一个简单的问题，图片位于文本下方，而不是旁边。

标记是这样的:

<div class="footer">
     <p>bla bla bla bla</p>
     <a href="url_here" class="next" title="Next"><span>Next</span></a>
</div>

CSS 是这样的:

div.footer p {
    color: #FFF;
    width: 80%;
    margin: 0 auto;
    padding:0;
    border: 1px solid white;
}
div.footer a.next {
    background-repeat:no-repeat;
    display: block;
    float: left;
    margin-left: 2em;
    height: 52px;
    width: 24px;
    background-image: url('../gfx/arrow-right.jpg');
    margin-left: .7em;
}
div.footer a.next span {
    display: none;
}

该段落似乎想要推送其下方的链接，而不是漂浮在其旁边的空闲空间中。有任何想法吗？ <p>只有 80% 宽，所以它有很多空间来显示链接。

干杯

Answer 1

段落是一个 block 级元素，它会强制自己在最后一个元素之后换行，并强制下一个元素换行。

如果您想要左侧的链接( anchor 上有一个 float :left)，请尝试将段落 float 到右侧。

尝试

div.footer p{
     ...
     float:right;
}

参见 http://jsfiddle.net/2PXt6/1/

如果你想让 anchor float 到段落的右边，把 anchor 移到段落之前，然后在anchore标签上放一个float:right。

编辑:要使 anchor 位于右侧，请首先在 html 和 float:right 中设置 anchor ，请参阅 http://jsfiddle.net/2PXt6/4/

如果您不想更改 html，请将段落向左浮动，将 anchor 向左浮动。见http://jsfiddle.net/2PXt6/5/