如何使用CSS将最后一个<li>标签移动到最右侧

Question

这是我的示例HTML代码。我想要将最后一个 <li class="single"><div id="loader">Loading....</div></li> 向右移动到最右边。

<div id="content">
    <ul class="paginate pag5 clearfix">
        <li class="single">Page 5 of 5 of 50</li>
        <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">prev</a></li>
        <li><a href="http://localhost:13562/SamplePager/Index">1</a></li>
        <li><a href="http://localhost:13562/SamplePager/Index">2</a></li>
        <li><a href="http://localhost:13562/SamplePager/Index">3</a></li>
        <li><a href="http://localhost:13562/SamplePager/Index">4</a></li>
        <li><a href="http://localhost:13562/SamplePager/Index">5</a></li>
        <li><a href="http://localhost:13562/SamplePager/Index">6</a></li>
        <li><a href="http://localhost:13562/SamplePager/Index">7</a></li>
        <li><a href="http://localhost:13562/SamplePager/Index">8</a></li>
        <li class="current">9</li>
        <li class="navpage"><a href="">next</a></li>
        <li class="single"><div id="loader">Loading....</div></li>
    </ul>
</div>

我使用这个CSS样式

.paginate > li:last-child
{
    float:right;
    position:absolute
}

但依然没有成功。请看我的JSFiddle：https://jsfiddle.net/tridip/rok4vsaf/，请问哪里出了问题导致最后的li元素无法正确移动？

- Mou

Answer 1

请记住，如果您有一个绝对定位的元素，不能将其浮动。可以尝试以下方法：

    .paginate{
       position:relative;
   }
    .paginate > li:last-child
    {
    right:0;
    position:absolute
   }

记得声明位置，例如 "right:0;"

但你可以更简单地声明元素，如下所示：

.paginate > li{
  display:inline-block;
  vertical-align:middle;
 }

.paginate >li:last-child{
  float:right;
}

- balumanzano

---

我想把最后一个黑色的li推到末尾。 - Mou

你能给一个 JSFiddle 的链接吗？ - Mou

Answer 2

这看起来就可以解决问题： HTML 给加载器（loader）的li元素添加一个唯一的类名：

<li class="single loader"><div id="loader">Loading....</div></li>
                  ^^^^^^

CSS

将该类定义为：

.loader{
  position: relative!important;
  float: right!important;
}

更新的 Fiddle

- Nick Zuber

---

我想把最后一个黑色的li推到末尾。 - Mou

@Mou 我更新了这个示例并回复了您的问题 - 现在怎么样？ - Nick Zuber

Answer 3

这是你所需要的全部：

.paginate > li:last-child
{
    float:right !important;
}

---

从规则中删除position:absolute（.paginate > li:last-child）:

https://jsfiddle.net/rok4vsaf/2/

您不需要更改此代码中的position。

---

你还需要添加 float:right !important;:

https://jsfiddle.net/rok4vsaf/4/

（否则它将在样式表中的后续规则中被 float: left 覆盖，您可以使用 !important 防止这种情况发生。）

- CoderPi

---

你做了什么样的更改？ - Mou

我将信息添加到了我的回答中，您觉得可以吗？ - CoderPi

我想把最后一个黑色li推到末尾。 - Mou

啊，好的，这就是你需要的！如果它对你有用，请接受我的答案。 - CoderPi

@mou float:right !important; 是你真正需要的 ;) 其他任何东西都过于复杂。 - CoderPi

Answer 4

我这样使用更整洁：

.paginate > li:last-child
{
    margin-left: auto
    position:absolute
}

- jozef koko