CSS没有选择子元素

时间:2018-01-02 00:34:16

标签: html css bootstrap-4

我目前正在尝试在导航栏中选择列表元素并将它们向右浮动,但由于某种原因,列表元素不会浮动到右侧。知道为什么吗?

HTML:

 <body>

    <header>
        <!--Navigation bar-->
        <nav class="navbar navbar-expand-sm bg-light">
            <!--Navbar items-->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">Register</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Login</a>
                </li>
                <li class="nav-item">

                </li>
            </ul>
        </nav>
    </header>
    <!--Javascript files should be linked at the bottom of the page-->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"; integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"; integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"; integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>

CSS:

 body{
  background:#262733;
}

.navbar-nav .nav-item {
    float: right;
}

3 个答案:

答案 0 :(得分:2)

订单错了。如果要在.navbar-nav .nav-item元素中选择.nav-item,则应为.navbar-nav。所以正确的代码是

body{
  background:#262733;
}

.navbar-nav .nav-item {
  float: right;
}

答案 1 :(得分:0)

您也可以使用ul class(navbar-nav)并简单地定位该类中的li元素。

--provider

答案 2 :(得分:0)

你的列表元素正好漂浮,但是你还没有走得太远。首先我为ul设置了list-style为none,然后我给了一些左边距将它们分开。根据您的需要设计样式,我改变了您的深色背景,以便您可以更好地看到它:

 body{
  background: #efefef;
}

ul.navbar-nav {
list-style: none;
}

li.nav-item {
margin: 0 0 0 1em;
}

.navbar-nav .nav-item {
    float: right;
}
        <!--Navigation bar-->
        <nav class="navbar navbar-expand-sm bg-light">
            <!--Navbar items-->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">Register</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Login</a>
                </li>
                <li class="nav-item">

                </li>
            </ul>
        </nav>
    </header>
    <!--Javascript files should be linked at the bottom of the page-->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"; integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"; integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"; integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>