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.
display: flexon the<ul>– Makes the list a flex container, aligning<li>children horizontally with control over spacing and alignment.display: inline-blockon<li>– Each item behaves like an inline block, flowing horizontally while allowing padding and margin control.display: gridon the<ul>– Define columns to place menu items horizontally with precise spacing.
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
flexfor responsive and flexible horizontal menus.Use
gapinstead of individual margins for consistent spacing between items.Remove default list padding and bullets using
list-style: none; padding: 0; margin: 0;.Use
inline-blockfor simpler menus without flex dependencies, but be aware of whitespace issues between items.