How can you make a <li> element appear horizontally instead of vertically?
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.
- 1
display: inline– Makes each list item flow inline, placing them side by side. Simple but limited in spacing control. - 2
display: inline-block– Inline-level blocks that respect width, height, and margin, allowing more control thaninline. - 3
display: flexon the parent<ul>– Makes the list a flex container, arranging<li>children horizontally with powerful alignment options. - 4
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.
- 1
Use
flexfor responsive horizontal lists, as it handles spacing and alignment better thaninlineorinline-block. - 2
Use
gapto add consistent spacing between list items instead of individual margins. - 3
Remove default
<ul>padding and list-style for clean horizontal layouts. - 4
For complex multi-row horizontal lists, consider
gridfor more control over alignment and wrapping.