CODEWITHSUNDEEP
htmlcss
LarsChung
LarsChung

Reputation: 753

How to separate an <li> element (menu) in a vertical navigation-bar

Basically if you make a vertical navigation-bar, it becomes:

Item1
Item2
Item3

But I want it so that Item1 and Item2 on top, but Item3 on bottom, so it would look like

-- Top Screen --
Item1
Item2
.. empty ..
Item3
-- Bottom Screen --

Is there a way to do this? I've seen examples like making another div element on Item3 and make it float, but that would make the Item3 overlap the Item1 and Item2 if the screen becomes too short.

I've read some stuff in bootstrap and it has a function called navbar-right and navbar-left, so I assume this is possible.

Upvotes: 0

Views: 2523

Answers (3)

T. Braas
T. Braas

Reputation: 11

You can use an child seletors like this (if you want to select a specific li) 

<!DOCTYPE html>
<html>
<head>
<style> 
li:nth-child(3) {
    margin-top:20px;
    background: #ff0000;
}
</style>
</head>
<body>
<ul>
<li>The first paragraph.</li>
<li>The second paragraph.</li>
<li>The third paragraph.</li>
</ul>
</body>
</html>

or if you want to select the last one:

li:last-child {
    margin-top:20px;
    background: #ff0000;
}

Upvotes: 0

Fernando Souza
Fernando Souza

Reputation: 1779

You can add an id to item 3 CSS, and change it`s margin:

Your HTML

   <ul>
        <li>item1</li>
        <li>item2</li>
        <li id="item3">item3</li>
   </ul>

Your CSS

#item3{margin-top:20px;}

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Place your list relative.
The first two list-items can be placed without any special styling.

The last list item will be placed absolute, and giving a bottom: 0 so it sticks to its parents bottom:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
  height: 200px;
  border: 1px solid red;
  position: relative;
}
ul>li {
  display: block;
  border: 1px solid blue;
}
ul>li:last-child {
  position: absolute;
  bottom: 0;
  width: 100%;
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Upvotes: 1

Related Questions