Question

这是我的示例html。我想将最后li <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
}

但仍然没有运气。看我的js小提琴https://jsfiddle.net/tridip/rok4vsaf/

我犯了错误，因为最后一个李没有正确移动。

Answer 1

请记住，如果你有一个绝对元素，你不能漂浮它，试试这个：

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

记得申报职位，在这种情况下“正确：0;”

但你可以做的更简单，就是声明这样的元素：

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

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

Answer 2

这似乎可以解决问题：

<强> HTML

为加载程序li提供一个唯一的类：

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

<强> CSS

将该类定义为：

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

<强> Updated Fiddle

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

来阻止此操作

Answer 4

我用起来更整洁：

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

如何将最后一个li移动到最右侧的CSS

4 个答案: