How would you make a navigation menu horizontally aligned using display?

Q: How would you make a navigation menu horizontally aligned using display?

Navigation menus are typically lists (` ` with ` ` items). By default, list items stack vertically. Using CSS display properties, you can align them horizontally without floats or positioning. `display: flex` on the ` ` – Makes the list a flex container, aligning ` ` children horizontally with control over spacing and alignment. `display: inline-block` on ` ` – Each item behaves like an inline block, flowing horizontally while allowing padding and margin control. `display: grid` on the ` ` – Define columns to place menu items horizontally with precise spacing. ul.nav-menu { display: flex; gap: 24px; /* space between menu items */ list-style: none; padding: 0; margin: 0; } ul.nav-menu li { padding: 8px 12px; background: lightblue; border-radius: 4px; } Home About Services Contact ul.nav-menu-inline { list-style: none; padding: 0; margin: 0; } ul.nav-menu-inline li { display: inline-block; margin-right: 20px; padding: 8px 12px; background: lightgreen; border-radius: 4px; } Home About Services Contact 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. Use `flex` for responsive and flexible horizontal menus. Use `gap` instead of individual margins for consistent spacing between items. Remove default list padding and bullets using `list-style: none; padding: 0; margin: 0;`. Use `inline-block` for simpler menus without flex dependencies, but be aware of whitespace issues between items.

Difficulty: 3/10

display property, flexbox, inline-block

Creating a Horizontal Navigation Menu Using CSS Display

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.

How would you make a navigation menu horizontally aligned using display?

Difficulty: 3/10

display property, flexbox, inline-block

Creating a Horizontal Navigation Menu Using CSS Display

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.

How would you make a navigation menu horizontally aligned using display?

Creating a Horizontal Navigation Menu Using CSS Display

How would you make a navigation menu horizontally aligned using display?

Creating a Horizontal Navigation Menu Using CSS Display

Scenario Questions

Follow-up Questions