使用右浮动时排序导航列表项

Question

我有以下 bootstrap 导航，它的样式是我想要的，只是列表项的顺序错误。

Tandems 是第一个列表项，Contact 是最后一个，我希望它按以下顺序出现但向右浮动。八和九应该向右浮动。

编辑* 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 来做到这一点？这是一个 fiddle，其中包括我的 html 和 css。

谢谢保罗

Answer 1

将导航列表项的容器元素而不是导航项本身浮动到右侧。

这是一个简化的例子。

<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

当您浮动 navigation/list 项本身时，它们会按照它们在标记中出现的顺序向右浮动，这具有颠倒顺序的效果。 Tandems 首先出现在标记中，因此它向右移动在下一个项目之前，即 Charities .现在 Charities 向右移动 before 下一个项目 Courses。对于所有项目，这将继续作为在它们之前移动到右侧的项目之后的排列，它们给出相反顺序的外观。

如前所述，解决方法是使项目的容器而不是项目本身浮动。根据样式，这可能需要在父容器上进行 clearfix。

Answer 2

Flexbox 可以做到这一点..非常简单：

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>

使用右浮动时排序导航列表项

Ordering Nav list items when using float right

html

css

nav

twitter-bootstrap