Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Lukas Nachtigall
Lukas Nachtigall
498 Points

CSS ul style issue

Hi, i do not know, why the menu is always showing in that Vertical order list, and not Horizontaly oriented.

That suppose to work but with .nav in style css its showing as Vertical list.

in style.css is : ul.nav { margin: 120px 0 0 0; list-style: none; float: right; }

ul.nav li { float: left; margin-right: 40px;

}

ul.nav li a { color: #FAF3BC }

Its working as horizontal menu only when in style.css i remove .nav like that : ul { margin: 120px 0 0 0; list-style: none; float: right; }

ul li { float: left; margin-right: 40px;

}

ul li a { color: #FAF3BC }

Can you please explain me why ? thank you..

5 Answers

J.T. Gralka
J.T. Gralka
20,126 Points

Lukas,

Because list items display as block level elements by default, you need to style your list items with the following property: display: inline; -- to get them to display horizontally, or rather, as inline elements.

From there you can apply margins to your li elements to achieve a desired spacing in between your items.

Hope that helps solve your problem!

Best,

J.T.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Lukas - Here's a codepen demo using the display: inline property that @JT mentioned. Play around with it and then let us know if you have anymore questions.

If you do have more questions maybe create a few codepen's to compare and contrast the different issues you are having.

Lukas Nachtigall
Lukas Nachtigall
498 Points
Lukas Nachtigall
Lukas Nachtigall
498 Points

Thank you for help :)

Juan David Pena
Juan David Pena
2,145 Points
Juan David Pena
Juan David Pena
2,145 Points

Here's mine, and its also not working, and I have no idea why, please help. Css:

nav ul li { display: inline; }

ul.nav { margin: 120px 0 0 0; list-style: none; float: right; }

ul.nav li { float: left; margin-right: 40px; }

ul.nav li a { color: #FAF3BC }

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Juan -

This depends on your markup. Assuming your markup looks like this:

  <ul class ="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
  </ul>

Consider this line nav ul li { display: inline; }, in plain English that's saying find the ul element inside of the nav element. However there is no <nav> element in the that markup, it's a class.

This might help you understand how to combine class and type selectors together.

Mod Note: In general, you shouldn't post some code which you are having trouble with in the middle of a thread which was started by someone for an issue they are having.

Basic Rule of Thumb: your code, your issue, your thread