浮動小数点を使用するときにNavリストアイテムを注文する

Question

私は、フォローイングのブートストラップナビゲーションを持っています。リストアイテムが間違った順序であることを除いて、どのようにしたいのかスタイル付けされています。

タンデム最初のリスト項目で、連絡先は最後のものであると私はそれが次の順序で表示されますが、右に浮いしたいと思います。 8と9は右に浮かべるべきです。

<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はありますか？ここに私のHTMLとCSSが含まれているバイブルです。

おかげ ポール

Answer 1

フレキシボックスは単に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; 
} 

あなたは、ナビゲーション/リスト項目そのもの彼らは順序を逆転させる効果を有するマークアップに表示される順番で右に浮かべますフロートデモJSFiddle。 タンデムがマークアップの最初に表示されるので、の前にの次の項目であるチャリティが表示されます。今すぐチャリティは、の前にの次の項目に移動します。。これは、逆順の外観を出す前に、右に移動したアイテムの後のラインアップとして、すべてのアイテムについて継続します。

上記のように、項目自体の代わりに項目のコンテナを浮動させることが修正されています。これには、スタイリングに応じて親コンテナにclearfixが必要な場合があります。