CODEWITHSUNDEEP
htmlcss
Milosz K.
Milosz K.

Reputation: 21

<li> how to set last item in navbar to the right

How to set last <li> element in navbar to the right? Here is the code:

<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Rozwiń nawigację</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="index.html"> STRONA GŁÓWNA</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li><a href="panele.html">Panele podłogowe</a></li>
    <li class="divider"></li>
    <li><a href="wkrety.html">Wkręty i impregnaty</a></li>
    
  <li> <a href="test.pdf" download="Katalog produktów Drew-Holz"> KATALOG PRODUKTÓW
  <i class="fa fa-file-pdf-o" style="font-size:20px;color:#FF0000"> </i></a></li>
   </ul>

 
</div><!-- /.navbar-collapse -->

Upvotes: 1

Views: 2443

Answers (4)

Warden330
Warden330

Reputation: 1042

Here is an alternative way to address the last child element of something specific. In this case it selects the first child element of its parent counted from the last one.

ul li:nth-last-child(1) {
        text-align:right;
    }
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li><a href="panele.html">Panele podłogowe</a></li>
    <li class="divider"></li>
    <li><a href="wkrety.html">Wkręty i impregnaty</a></li>
    
  <li> <a href="test.pdf" download="Katalog produktów Drew-Holz"> KATALOG PRODUKTÓW
  <i class="fa fa-file-pdf-o" style="font-size:20px;color:#FF0000"> </i></a></li>
   </ul>
 
</div><!-- /.navbar-collapse -->

Upvotes: 0

Jeet
Jeet

Reputation: 795

`Like you said you wanted to set the last <li> item to right. What i have done here is i made a parent class named .sticky and i put inside the <li> elements. I set .sticky to displa:flex and justify-content: flex-end; so all <li> elemts will be set to the end of the page. and last part, i did li:last-child so i selected the 3rd <li> element and set it to margin-left: auto;.as you can see the results. Goal is achived. Hope you found your answer.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .sticky {
            display: flex;
            justify-content: flex-end;
        }
        li:last-child {
           margin-left: auto;
        }
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="body">
        <div class="sticky">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        </div>
      </div>
</body>
</html>

Upvotes: 1

Martin
Martin

Reputation: 22760

CSS pseudo element :last-of-type will (amazingly) only effect the last of that type of element.

    ul li:last-of-type {
        text-align:right;
    }
#<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li><a href="panele.html">Panele podłogowe</a></li>
    <li class="divider"></li>
    <li><a href="wkrety.html">Wkręty i impregnaty</a></li>
    
  <li> <a href="test.pdf" download="Katalog produktów Drew-Holz"> KATALOG PRODUKTÓW
  <i class="fa fa-file-pdf-o" style="font-size:20px;color:#FF0000"> </i></a></li>
   </ul>
 
</div><!-- /.navbar-collapse -->

OR, if you only wish the inner content to be moved to the right rather than the bullet point itself you can do this:

Because all the contents of your <li> is wrapped in an anchor tag, you can style that anchor tag to do what you need.

    ul li:last-of-type > a {
        display: block;
        text-align:right;
    }
#<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li><a href="panele.html">Panele podłogowe</a></li>
    <li class="divider"></li>
    <li><a href="wkrety.html">Wkręty i impregnaty</a></li>
    
  <li><a href="test.pdf" download="Katalog produktów Drew-Holz"> KATALOG PRODUKTÓW
  <i class="fa fa-file-pdf-o" style="font-size:20px;color:#FF0000"> </i></a></li>
   </ul>

</div><!-- /.navbar-collapse -->

Upvotes: 2

devShamsad
devShamsad

Reputation: 66

You can set margin-left: auto; to the last element. There is a bootstrap utility class class="ml-auto". This will push the element to the right.

For example,

<li class="ml-auto"></li>

Upvotes: 0

Related Questions