Question

我有下面的引导程序导航，除了列表项的顺序错误外，还有我想要的样式。

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

编辑*小提琴无法使用右拉

我的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 可以做到这一点......简单地说：

＆＃13;

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

＆＃13;

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

＆＃13;

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

当您漂浮导航/列表项本身时，它们会按照它们在标记中出现的顺序浮动到右侧，这样可以反转顺序。 Tandems 首先出现在标记中，因此它会在之前移动到下一个项目，即 Charities 。现在慈善机构在之前向移动课程。对于所有项目，这将继续作为在他们之前移动到右边的项目之后的阵容，给出相反顺序的外观。

如上所述，修复方法是浮动项目的容器而不是项目本身。这可能需要在父容器上使用clearfix，具体取决于样式。

使用向右浮动时订购导航列表项

2 个答案: