CODEWITHSUNDEEP
htmlcss
KC S
KC S

Reputation: 4915

Align li inside ul to the bottom

I have a li element inside a ul list that I wish to align to the bottom.

+------+
| li1  |
| li2  |
| li3  |
|      |
|      |
|      |
| li4  |
+------+

How can I do this?

WHAT I HAVE TRIED: 

li4 {
  position: fixed;   
  bottom: 0;
}

This moved the li4 to the bottom. However, since the ul is inside a hidden menu, li4 will appear even if I close the menu (this is not what I want) because of the position: fixed

Upvotes: 15

Views: 19477

Answers (6)

James Heffer
James Heffer

Reputation: 742

Just use fixed-bottom

<li class="nav-item px-3 fixed-bottom">
        <NavLink class="nav-link" href="" Match=NavLinkMatch.All>
            <span class="oi oi-arrow-thick-left" aria-hidden="true"></span>Logout
        </NavLink>
    </li>

(This is Blazor)

Upvotes: 0

Bhavin Shah
Bhavin Shah

Reputation: 2482

ul {
        position: relative;
        height: 200px;
        border : thin black solid;
        
    }
    
    ul li:last-child{
      position:absolute;
      bottom:0;
    }
    
<ul>
   <li>li1</li>
   <li>li3</li>
   <li>li2</li>
   <li>li4</li>
</ul>

Is this the same that you are looking for?

Hope this helps.

Upvotes: 0

Nawaz Ghori
Nawaz Ghori

Reputation: 591

position: fixed; will always display that li.
Instead make the following changes in your code i.e., "position: absolute" to child li ,and "position: relative" to parent li.

I have added the snippet here

.sub-menu { display: none; }

#li4 { 
position: absolute;
bottom: 0;
}

.main-menu>li:hover  .sub-menu { 
  display: block;
  position: relative;
  height: 100px;
}
<ul class="main-menu">
  <li>item1</li>
  <li>item2
  <ul class="sub-menu">
      <li>li1</li>
      <li>li2</li>
      <li>li3</li>
      <li id="li4">li4</li>
    </ul></li>
  <li>item3</li>
  <li>item4</li>
    
</ul>

I have created a main-menu which has 4items(item1,item2,item3,item4), and 2nd item(item2) is having some child sub-items(li1,li2,li3,li4).

Hovering on parent li will make the child ul to "display: block" here which was initially "display: none"

Upvotes: 1

Rohan
Rohan

Reputation: 467

If i understand properly then please try this.

   

 ul {
        position: relative;
        height: 200px;
    }
    
ul li.li4 {
       position: absolute;
       bottom: 0;
    }
<ul>
   <li>li1</li>
   <li>li3</li>
   <li>li2</li>
   <li class="li4">li4</li>
</ul>
Thanks.

Upvotes: 3

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

You can use flexbox to achieve this. Demo:

ul {
  /* just height for demo */
  height: 200px;
  /* become a flex-container */
  /* its children will be flex-items */
  display: flex;
  /* move flex-items in column */
  flex-direction: column;
}

/* add maximum available margin-top to last child */
/* this can be replaced with any selector like nth-child */
/* and will move flex-items to the bottom if any available vertical space */
ul > :last-child {
  margin-top: auto;
}

/* just outline to show results */
/* should be removed in production */
ul, li {
  outline: 1px dotted gray; 
}
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six (at the bottom)</li>
</ul>

Add aling-items: flex-start to ul if you don't want li to occupy all container width because by default flex-items are stretched (default align-items: stretch).

Also you can add align-items: center to center flex-items or align-items: flex-end to move li the the right.

Upvotes: 32

Dij
Dij

Reputation: 9808

you can give position:absolute to li4 and position:relative to ul. This will make the li position relative to ul and it will be at bottom.

ul{
 height: 150px;
 position: relative;
}
#li4{
position: absolute;
bottom: 0;
}
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li id="li4">li4</li>
</ul>

Upvotes: 1

Related Questions