Align li inside ul to the bottom
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.
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>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>