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

段落是一个块级元素，它将强制自己在最后一个元素之后的新行上，并强制下一个元素在新行上。

如果你想要左边的链接（你有一个浮动：左边的锚）尝试将段落浮动到右边。

试

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

请参阅http://jsfiddle.net/2PXt6/1/

如果您希望锚点浮动到段落的右侧，请将锚点移动到段落之前，并将浮点数放在锚点标记上。

编辑：让右边的锚点在html和float中首先有锚点：右看 http://jsfiddle.net/2PXt6/4/

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

Answer 2

您所描述的内容听起来像是“p”标签的正确行为。见here。如果您不想使用下面的链接，为什么不使用“div”而不是“p”标签？您应该能够将所有样式转移到新div。

更新：我认为下面的HTML会做你所说的。为简单起见，我将内联样式设为内联，您需要将它们移动到您的css文件中。

<div class="footer">
     <div style="float:left">bla bla bla bla</div>
     <a href="url_here" style="float:right" class="next" title="Next">Next</a>
</div>

Answer 3

事实上，我会这样做：

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

Answer 4

p是一个块级元素，所以除非你浮动它，否则它之后的东西将在它下面。

您可以浮动段落或将链接放在html中。

简单的CSS浮动问题

4 个答案: