html - 仅将 <br> 放入内联列表元素本身

Question

我想在一个内联列表中加入一个换行符来产生这个结果:

然而，当我在我的基本列表中加入一个换行符时，我得到的结果是:

我该怎么做才能在 li 元素中放置一个 br 而不会弄乱水平列表本身。

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

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

Answer 1

使用display: inline-block;相反:

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

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