How to Make a `` Display in a Horizontal Row

html

responsive-design

css

flexbox

byAnton Shumikhin·Dec 11, 2024

Flatten a <ul> into a horizontal row by setting <li> entities to display: inline-block. Here's a quick example for faster implementations:

<ul style="padding: 0;">
  <li style="display: inline-block; margin-right: 10px;">Item 1</li> <!-- Like a ninja, Item 1 appears from the shadows -->
  <li style="display: inline-block; margin-right: 10px;">Item 2</li> <!-- Followed by its dashing companion, Item 2 -->
  <li style="display: inline-block; margin-right: 10px;">Item 3</li> <!-- And the charming rogue, Item 3, completes the trio -->
</ul>

Here we strip default styles and determine list items to be side-by-side for an evenly spaced display.

The Tech Behind Displaying Inline-Blok

In just about any <ul>, the <li> elements can be made to display as inline-block. Here's your enlightenment to this tech:

display: inline-block: This technique is the equivalent of fighting dragons with dragon fire. This may just be an HTML block, but it surely packs a punch for width and height and keeps margin and padding in check.
display: flex: The Dumbledore of CSS, confiscates the need to float and restores order in a line. The display: flex; on <ul> handles this like a pro!

Flexbox: The Super Spacing Technique

In CSS flexbox layout model, you can apply spacing and alignment techniques to your list items with just a wave of your code-wand.

ul {
  display: flex;
  justify-content: space-around; /* The flexbox spell for balanced spacing */
  padding: 0;
  list-style-type: none; /* Who needs bullet points when you have style? */
}

Apart from feeling like a true wizard of coding, this gives you control over:

Flexible Spacing: Magic key justify-content: space-around; gives equal distribution of space around items automatically.
Alignment and Order: You got the knack of arranging items vertically and flipping the order when you shake things up responsively.

Dealing with the Monsters

Just when you thought you got this right, HTML throws some curveballs. Fear not!

Reading the Scroll of Browsers

inline-block shows a different face in different browser lands. Make sure your scroll (code) is read correctly across all kingdoms (browsers).

List Flow Disturbances

Sometimes, using float: right; might cause ripples in the force that push your list items out of alignment. Instead, flex it out or use inline-block with spacing control.