如何将 li 元素放在同一行上？

Question

我试图将所有 li 元素放在同一行并分开（左、中、右），但在输出中它们被分开但都在不同的行上。

<ul style="font-size:35px; list-style-type: none; display: inline">
   <li style="text-align: left;">Plantel</li>
   <li style="text-align: center;">Estádio</li>
   <li style="text-align: end;">Palmarés</li>
</ul>

Answer 1

内联显示不会仅影响您添加到的直接元素的子元素，因此您的 ul 内联到它的父元素。您可以使用 display flex 来解决这个问题，而 space-between 可以解决您想要的对齐问题。

.list {
  display: flex;
  justify-content: space-between;
  font-size: 35px; 
  list-style-type: none;
  padding: 0;
}

<ul class="list">
   <li>Plantel</li>
   <li>Estádio</li>
   <li>Palmarés</li>
</ul>