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

HTML Introduction to HTML and CSS (2016) HTML: The Structural Foundation of Web Pages and Applications HTML Lists

Posted by Nathalie Agnekil
Nathalie Agnekil
6,665 Points

Vertical and horizontal lists as in the video?

When doing the <li> in the video in the "Background"-box, the paragraphs are set under each other - a horizontal list. But when I look in the worksheet for the lists she says she has in the "Goals"-box and in the menu, they also use the tag <li> but they are vertical, next to each other? I can't find anywhere in either the html or css document that there is a specific tag or rule to make it vertical.

2 Answers

Steven Parker
Steven Parker
229,785 Points
Steven Parker
Steven Parker
229,785 Points

You're getting ahead of things a bit. The list direction is controlled by CSS settings, which will be the focus of the next stage of the course.

Just hang in there and it will probably be clear by the end of the next stage. If not, ask again at that time.

In the meantime, you can see the css that puts the items in line and also gives them the colored backgrounds in the "styles.css" file:

ul.skills {
  padding: 0;
  text-align: center;
}

.skills li {
  border-radius: 6px;
  display: inline-block;
  background: #ff9904;
  color: white;
  padding: 5px 10px;
  margin: 2px;
}

.skills li:nth-child(odd) {
  background: #0399ff;
}

The "display" setting is the one that changes the direction.

Nathalie Agnekil
Nathalie Agnekil
6,665 Points
Nathalie Agnekil
Nathalie Agnekil
6,665 Points

Well, I did watch for like an hour more but didn't get an answer. That's why I went back to this video to ask it cause I thought it was the relevant video. And I can't see anything different in the code still, that's why I'm wondering.

Steven Parker
Steven Parker
229,785 Points
Steven Parker
Steven Parker
229,785 Points

I added an excerpt of the CSS to my answer.