CSS Project 2a – Horizontal menu links

CSS

0 Comments

As a reminder, here's what Amy's header currently looks like.

As mentioned earlier, the first thing we should probably fix is the menu links (HTML, CSS, etc..). Right now, they are on top of each other, but they should be side by side horizontally (as shown in the result below). This can be fixed with the display property that we just learned.

Try it yourself before looking at the solution

Open HTML Editor

CSS changes

#menu,
#menu-right {
    ...

    display: inline-block;
}

#header ul li {
    ...

    display: inline-block;
}

Result

Line 5
The menu's ul tag is set to display: block by default, which is why the ul wanted to be on its own line under the logo. By changing its display to inline-block, it now sits to the right of the logo.
Line 11
The li element is set to display: list-item by default, which makes it behave like a block element that can have bullets to the left of it. By changing this to inline-block, all the links can sit next to each other (on one line).

This looks much better, but let's center the links vertically.

Leave a Comment