时间戳

首页 > 解决方案 > 如何将 li 元素放在同一行？

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

问题描述

我试图将所有 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>

标签： html

解决方案

显示内联不会影响子元素，只会影响您添加它的直接元素，因此您的 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>

推荐阅读