How to move last li to right most side CSS

Question

this is my sample html. i want to move last li <li class="single"><div id="loader">Loading....</div></li> to right most side.

<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>

i use this css

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

but still no luck. see my js fiddle https://jsfiddle.net/tridip/rok4vsaf/

where i made the mistake for which last li is not moving properly.

Answer 1

remember if you have an absolute element, u cant float it, try this:

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

remember to declare the position , in this case "right:0;"

but you can do more simple is , declare the elements like this:

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

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

Answer 2

This seems to do the trick:

HTML

Give the loader li a unique class:

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

CSS

Define that class as such:

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

Updated Fiddle