justifiy the list

zyrox · June 4th, 2019, 12:09 PM

Hello, I am newbie and I want know how to justify the list (ul/ol) in a simple code? Thank you

ghanendra-yadav · July 2nd, 2019, 06:17 PM

Just change in CSS parent class display: flex and then justify-content: space-between or justify-content: space-around.

Example:

HTML

Code:

<ul class="Menus-Class">
    <li>About</li>
    <li>Contact</li>
    <li>Contact Longer Link</li>
    <li>Contact</li>
</ul>

CSS

Code:

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.Menus-Class {
    display: flex;
    justify-content: space-between;
}