Aligning List Items Horizontally Using CSS Display
By default, <li> elements are block-level, so they stack vertically. Using CSS display values, you can change their layout to horizontal.
display: inline– Makes each list item flow inline, placing them side by side. Simple but limited in spacing control.display: inline-block– Inline-level blocks that respect width, height, and margin, allowing more control thaninline.display: flexon the parent<ul>– Makes the list a flex container, arranging<li>children horizontally with powerful alignment options.display: gridon the parent<ul>– Allows precise horizontal (and vertical) placement of list items using columns.
In this example, the <ul> is a flex container. All <li> elements align horizontally with equal spacing, and styling like padding and background works as expected.
Use
flexfor responsive horizontal lists, as it handles spacing and alignment better thaninlineorinline-block.Use
gapto add consistent spacing between list items instead of individual margins.Remove default
<ul>padding and list-style for clean horizontal layouts.For complex multi-row horizontal lists, consider
gridfor more control over alignment and wrapping.