Блог

Главная - Вопросы по программированию - Как я могу поместить элементы li в одну строку?

Как я могу поместить элементы li в одну строку?

#html

#HTML

Вопрос:

Я пытаюсь поместить все элементы 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>

Ответ №1:

Отображение встроенного не влияет на дочерние элементы, только на прямой элемент, к которому вы его добавляете, поэтому ваш ul встроен в его родительские элементы. Вы можете использовать display flex для решения этой проблемы, а пробел между ними решает нужное вам выравнивание.

 .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>