Shifting last tab towards right in Bootstrap

Question

I have the following code for displaying tabs in bootstrap:

    <div class="navbar navbar-default navbar-static">
      <ul class="nav navbar-nav">
         <li id="camp_search_stats" class="active"><a href="javascript:void(0)" data-toggle="tab">Search</a></li>
         <li id="camp_click_stats"><a href="javascript:void(0)" data-toggle="tab">Click</a></li>
         <li id="camp_play_stats"><a href="javascript:void(0)" data-toggle="tab">Play</a></li>
      </ul>
    </div>

However, I want to display the last tabs towards extreme right. I tried: float:right; for the last li element, but it didnt work..

Answer 1

Try this:

 <div class="navbar navbar-default navbar-static">
      <ul style="width:100%" class="nav navbar-nav">
         <li id="camp_search_stats" class="active"><a href="javascript:void(0)" data-toggle="tab">Search</a></li>
         <li id="camp_click_stats"><a href="javascript:void(0)" data-toggle="tab">Click</a></li>
         <li class="pull-right" id="camp_play_stats"><a href="javascript:void(0)" data-toggle="tab">Play</a></li>
      </ul>
    </div>