CSS not selecting child elements
Question
I am currently trying to select the list elements in my navigation bar and float them right, however for some reason the list elements aren't floating to the right. Any idea why?
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 answers
solution1
2 2018-01-02 00:36:46
The order is wrong. It should be .navbar-nav .nav-item if you want to select the .nav-item inside the .navbar-nav element. So correct code would be
body{
background:#262733;
}
.navbar-nav .nav-item {
float: right;
}
solution2
0 2018-01-02 00:46:20
You could also use your ul class (navbar-nav) and simply target the li elements in that class.
.navbar-nav > li {
float: right;
}
solution3
0 2018-01-02 06:06:57
Your list elements are floating right just fine, but you didn't quite go far enough. First I set list-style to none for the ul, then the li's I gave some left margin to separate them a bit. Style these as you see fit, I changed your dark background so you can see it a bit better:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.