Sean Sean - 1 year ago 87
CSS Question

How to Get Menu Items on Same Row

If you look at the menu, you'll notice that all of the menu items are aligned left within a container in a single column. But what I want is for them to spread out evenly in a single row, and then to collapse into a hamburger menu at tablet and mobile size.

I know that

is by default a block element, so I tried giving the
with the id
and the class of
a style of


But nothing's happening.

I also tried assigning


to the div that encompasses the ul, which has a class of
, but that didn't work either. Once I'm able to distribute the menu items evenly in a single row, I'll be able to create the hamburger menu. This is a perfect example of how we want the menu to behave.

Answer Source

Close! The list item (li) elements need to have display: inline-block;, not the list itself (ul).

This will work:

.menu-item {
  display: inline-block;
  margin-right: 10px; /* add a gap between items */
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download