只在内联列表元素本身内放置一个

Question

我想将换行符放入内联列表以生成此结果：

然而，当我在基本列表中放置换行符时，这是我得到的结果：

我如何制作它以便我可以只在没有的情况下将一个br放在li元素中，弄乱水平列表本身。

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> 

Answer 2

而不是使用

设置李的样式

no matching function for call to ‘Numeric_to_int(const Numeric&)’

你可以通过

达到预期的效果

display:inline;

Answer 3

使用 display: inline-block

这是摘录

＆＃13;

＆＃13;

ul{
  list-style:none;
}

ul li{
  padding:20px;
  display:inline-block;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;