JR Kibbey JR Kibbey - 3 months ago 8
CSS Question

Put a <br> only within inline list element itself

I would like to put a line break into an inline list to produce this result:
enter image description here

However when I put a line break into my basic list, this is the result I get:
enter image description here

How would I make it so that I can put a br within the li element only without, messing up the horizontal list itself.



li {
list-style-type: none;
display: inline;
}

<ul>
<li>Hello</li>
<li>Bonjour</li>
<li>Longer<br>text</li>
<li>Aloha</li>
</ul>




Answer

Use display: inline-block; instead:

li {
  list-style-type: none;
  display: inline-block;
}
<ul>
  <li>Hello</li>
  <li>Bonjour</li>
  <li>Longer<br>text</li>
  <li>Aloha</li>
</ul>