Question

我有这个简单的HTML：

<a style="display:block;text-align:right" href="link.com">Test Link</a>

我想在父DIV的最右边放置一个链接。但是，我尝试了上面的代码，但它引导链接填充所有空间，这意味着它可以在div的整个宽度上单击。

避免这种情况的唯一方法是为链接提供固定宽度或将链接包装在另一个DIV中。还有其他方法吗？或者浮动链接但它会破坏布局

Answer 1

您可以使用浮动将其“浮动”到div的右侧。

<a style="float:right" href="link.com">Test Link</a>

看到这个小提琴： http://jsfiddle.net/wstmrtgz/

Answer 2

JSFiddle example

我使用了display:inline-block和float：

.parent {
    display:inline-block;
    width:100%;
}

.link {
    display:inline-block;
    float:right;
    text-align:right;
}

编辑：看过关于无法使用浮点数的评论，您也可以使用display:inline-block和固定宽度执行此操作。

Answer 3

float将解决此问题

不要忘记清除漂浮物！

<div style="width: 200px; background-color: red;">
    <a style="float:right;" href="link.com">Test Link</a>
    <div style="clear:both;"></div>
</div

在下面的小提琴中看到有和没有明显的区别！

明确

http://jsfiddle.net/j9q8jgvm/

没有明确的

http://jsfiddle.net/j9q8jgvm/

带有显示块和text-align的href标签填充宽度

3 个答案: