Navigation menus are typically lists (<ul> with <li> items). By default, list items stack vertically. Using CSS display properties, you can align them horizontally without floats or positioning.

Common Approaches

1
display: flex on the <ul> – Makes the list a flex container, aligning <li> children horizontally with control over spacing and alignment.
2
display: inline-block on <li> – Each item behaves like an inline block, flowing horizontally while allowing padding and margin control.
3
display: grid on the <ul> – Define columns to place menu items horizontally with precise spacing.

Example: Horizontal Menu Using Flex

Example: Horizontal Menu Using Inline-Block

Flex is recommended for responsive menus because it handles spacing, alignment, and wrapping more gracefully than inline-block. inline-block works for simpler static menus.

Best Practices

1
Use flex for responsive and flexible horizontal menus.
2
Use gap instead of individual margins for consistent spacing between items.
3
Remove default list padding and bullets using list-style: none; padding: 0; margin: 0;.
4
Use inline-block for simpler menus without flex dependencies, but be aware of whitespace issues between items.

Difficulty: 3/10

Topics: display property, flexbox, inline-block

Scenario Questions

0-2 years experience

1
We have a simple <ul> navigation list. How would you use CSS display to make the list items appear side‑by‑side in one row?
2
If you set display:inline on each <li>, what will the layout look like and why might that be insufficient?
3
What difference does display:inline‑block make compared to inline for aligning the menu items horizontally?

2-5 years experience

1
Your current nav uses float to line items up horizontally, but the dropdown submenu breaks the layout. How would you refactor the CSS using modern display values to keep the main menu horizontal and handle the dropdown?
2
During a code review you notice the navigation bar overflows on mobile because the flex container doesn’t wrap. How would you adjust the display properties to make it responsive while preserving horizontal alignment?
3
A teammate reports that using display:table‑cell for the menu caused extra spacing in some browsers. How would you replace it with a more reliable display technique and what trade‑offs would you consider?

5-8 years experience

1
The navigation component must support LTR and RTL languages and allow items to be injected at runtime. How would you architect the CSS (display, flex, etc.) to keep the menu horizontally aligned in all cases, and what performance implications do you watch for?
2
You discover that hovering a menu item triggers a display change that causes a full reflow. How would you redesign the component to minimize layout thrashing while preserving the horizontal layout?
3
When the nav is rendered server‑side with critical CSS inlined, the external stylesheet sometimes fails to load. What CSS strategy using display properties would you employ to ensure the menu still aligns horizontally in that fallback scenario?

8+ years experience

1
Our legacy monolith uses a table‑based navigation with display:table‑cell. We’re moving to a micro‑frontend architecture. How would you plan the migration to a flex‑based horizontal menu while guaranteeing backward compatibility across dozens of teams?
2
You’re defining a cross‑team design‑token system for layout. How would you abstract the horizontal navigation alignment so teams can reference a single token yet choose between flex or grid implementations without breaking existing pages?

Follow-up Questions

❓What changes if you switch from flex to inline‑block?
❓How would you make the menu responsive on small screens?
❓Does this approach affect screen‑reader navigation?