<nav> <li> problems

Hi there!
So basically this is going to be a noob question but i tried to find help in google and i can’t figure it out.
I have this code in HTML

 <nav class="nav_order">
            <ul class="nav_menu">
                <li ><a href=#>lorem</a> </li>
                <li ><a href=#>ipsum</a> </li>
                <li ><a href=#>dolor</a> </li>
            </ul>
 </nav>

until here, everything seems ok. Where im having problems is in the css spreadshet

.nav_menu{
    margin:0em;
    padding:0;
}
.nav_order{
    display:inline;
}

So, i want to make an horizontal navegation bar, and the “nav_order” class is supposed to do it by “display:inline;” but it wont work. How can i solve this? Shouldn’t a class applied to nav (which is the ul and il parent) also apply to this two?
Thank you!

Hi!

What happens if you try to use:

.nav_order li {
    display: inline;
}

I have added li the class name.
I hope it helps!

Yes! thank you very much!
so, whats the reason for adding the li to the class name? its because its a children of nav? or because you want to only affect the li tag?

Hi!

I have supposed you would like to display the li’s horizontally. And by default they will be displayed vertically. To display them horizontally you have to apply inline or inline-block on them as recommended.

Thank you Moriel
I thought it was enough to put a class in the div tag!

1 Like