将最后2个li元素推向右侧

Question

如果我想保留第一个li的位置，但是我想要推到最右边的第二个和第三个li怎么办，所以我试图实现这个目标：

到目前为止，我有以下内容：

Fiddle

HTML：

<div class=" ">
<ul class="container">
    <li>Link One</li>
    <li>Link Two</li>
    <li>Link Three</li>
</ul>
</div>

CSS：

.container {
    width: 300px;
    list-style-type: none;
    background-color: yellow;
}

.container li {
    width: 30px;
    display:inline;
    background-color: cyan;
}

Answer 1

这样的东西？所以我们可以像这样选择2和3，并将它们浮动到右边。很简单。这些会交换最后2个链接。

CSS：

.container li:nth-child(n+2) {
    width: 80px;
    display:inline;
    float: right;
    background-color: red;
}

DEMO HERE

---

Gaby又名G. Petrioli 的评论中指出：

:nth-last-child(-n+2)

也可以使用。

DEMO HERE

---

简单地将最后两个链接放在相反的方向以解决交换问题。交换是由float: right;引起的。

DEMO HERE

Answer 2

.container li+li{
    float: right;  
    margin-left: 5px;
}

使用+选择器，您可以获得所有直接跟随另一个li的li。

这将导致第一个列表点之后的所有元素都在右侧。

http://jsfiddle.net/LqLFt/4/

Answer 3

的CSS：

.container li:first-child {
margin-right:95px;
}

Answer 4

您应该进行以下更改：

.container li:nth-child(2),
.container li:nth-child(3) {
    float: right;
    width: auto;
    margin-right: 10px;
}

示例：http://jsfiddle.net/LqLFt/6/