Here's the semantic HTML that's typically used to create a menu:
<nav> <ul> <li><a href="/">Menu Item 1</a></li> <li><a href="/">Menu Item 2</a></li> <li><a href="/">Menu Item 3</a></li> </ul> </nav>
There are (at least) two ways to get these menu items to line up next to each other on the page (horizontally instead of vertically that is). Either you can use
display: inline-block on the
li elements, or you can use
display: flex on the
ul container element.
You'll often see the inline block approach in older code bases and the more modern flexbox approach in more recent code.
One issue with the inline block approach is that you'll have to deal with the spaces that show up between the elements, at least if you're trying to achieve a pixel perfect design. It can be solved by setting
font-size: 0 on the container element (i.e. the
ul) and then resetting the font size on the individual list elements.
You don't have this problem with the flexbox approach, but you do have to get rid of the browser's default list styling by setting
list-style: none on the
You can check out the code in more detail on the example pages here: