Упорядочить элементы списка Nav при использовании float right

Question

У меня есть следующая загрузочная навигация, и она стилизована так, как я ее хочу, за исключением того, что элементы списка находятся в неправильном порядке.

тандемы является первым элементом списка и контакт является последним, и я хотел бы, чтобы она появилась в следующем порядке, но плавать вправо. Восемь и девять должны быть размещены справа.

Edit * Fiddle не работает с тянуть вправо

Мой HTML выглядит следующим образом

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
      <!-- Brand and toggle are grouped for better mobile display --> 
      <div class="navbar-header page-scroll col-md-2"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand page-scroll" href="#page-top"><img src="img/logo.png" alt="logo" /></a> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-right col-md-9"> 
        <li><a class="page-scroll" href="#services">Tandems</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Charities <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="videobackground.html">NW Air Ambulance</a></li> 
          <li><a href="icons.html">Alder Hey Imagine</a></li> 
          <li><a href="typography.html">Clatterbridge</a></li> 
          <li><a href="pricingtables.html">We are Macmillan</a></li> 
         </ul> 
        </li> 
        <li><a class="page-scroll" href="#pricing">Courses</a></li> 
        <li><a class="page-scroll" href="#about">Prices</a></li> 
        <li><a class="page-scroll" href="#blog">Events</a></li> 
        <li><a class="page-scroll" href="#contact">Gallery</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Features <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="videobackground.html">Video Background</a></li> 
          <li role="separator" class="divider"></li> 
          <li><a href="icons.html">Icons</a></li> 
          <li><a href="typography.html">Typography</a></li> 
          <li><a href="pricingtables.html">Pricing Tables</a></li> 
          <li><a href="buttons.html">Buttons</a></li> 
          <li><a href="progressbars.html">Progress Bars</a></li> 
          <li role="separator" class="divider"></li> 
          <li><a href="blank.html">Blank Page</a></li> 
          <li><a href="404.html">404 Page</a></li> 
         </ul> 
        </li> 
        <li><a class="page-scroll" href="#contact">The Dropzone</a></li> 
        <li><a class="page-scroll" href="#contact">Contact</a></li> 
       </ul> 
      </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

Есть ли способ сделать это с помощью CSS? Вот скрипка, которая включает мои html и css.

Благодаря Пол

Answer 1

Flexbox может сделать that..quite просто:

ul { 
 
    list-style-type: none; 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    flex-wrap:wrap; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    padding:.25em; 
 
    border:1px solid grey; 
 
    display:block; 
 
}

<ul> 
 
    <li><a href="#">Menu Item 1</a></li> 
 
    <li><a href="#">Menu Item 2</a></li> 
 
    <li><a href="#">Menu Item 3</a></li> 
 
    <li><a href="#">Menu Item 4</a></li> 
 
    <li><a href="#">Menu Item 5</a></li> 
 
    <li><a href="#">Menu Item 6</a></li> 
 
    <li><a href="#">Menu Item 7</a></li> 
 
    <li><a href="#">Menu Item 8</a></li> 
 
    <li><a href="#">Menu Item 9</a></li> 
 
</ul>

Answer 2

Поплавка контейнера элемента из элементов списка навигации справа вместо Навигационных самих изделий.

Вот упрощенный пример.

<header> 
    <ul class="pull-right"> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
    </ul> 
</header> 

header { 
    overflow: hidden; /* clearfix */ 
    background-color: #222; 
} 
ul, li { 
    margin: 0; 
    padding: 0; 
} 
ul li { 
    padding: 5px 10px; 
    list-style: none; 
    float: left; 
    color: #f1f1f1; 
} 
.pull-right { 
    float: right; 
} 

Demo JSFiddle

Когда вы плывете сами элементы навигации/список они получают плавали направо в порядке их появления в разметке, которая имеет эффект обратного порядка. Тандем появляется первым в разметке, поэтому он перемещается вправо до следующий элемент, который является Благотворительность. В настоящее время Благотворительные организации перемещается вправо до следующий элемент, Курсы. Это продолжается для всех элементов в качестве составной части после элемента, который перемещается вправо перед ними, давая внешний вид обратного порядка.

Исправление, как уже упоминалось, заключается в том, чтобы плавать контейнер предметов вместо самих предметов. Это может потребовать clearfix в родительском контейнере в зависимости от стиля.