将链接列表对齐到右侧

Question

我试图将一系列链接对齐到右边。当父div宽度变大时，代码会中断。

例如，在下面的代码中，div width=700px看起来不错：

但width=800px看起来像这样：

HTML：

<div class='linksArea' style="width: 800px;">
    <div class="boxLeft"></div>

    <a href="google.com">Link1</a>
    <br>
    <a href="google.com">Link2</a>
    <br>
    <a href="google.com">Link3</a>
    <br>
    <a href="google.com">Link4</a>
    <br>
    <a href="google.com">Link5</a>
    <br>
    <a href="google.com">Link6</a>
</div>

CSS：

.boxLeft {
     display: inline-block;
     width: 200px;
     height: 200px;
     background-color: green;
     float:left;
}

.linksArea {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}

.linksArea a {
    display: block;
    background-color: #ccc;
    width: 20em;
    margin-bottom: 0.5em;
    padding-top: .6em;
    padding-bottom: .6em;
    float:right;
}

如何解决这个问题？

Answer 1

只需将clear:right添加到您的.linksArea a CSS：

.linksArea a {
    display: block;
    background-color: #ccc;
    width: 20em;
    margin-bottom: 0.5em;
    padding-top: .6em;
    padding-bottom: .6em;
    clear:right;
    float:right;
}

<强> jsFiddle example

添加clear确保元素必须保持在其前面的其他右浮动元素之下，而现有的float将像其他元素一样将其推向右侧。