CODEWITHSUNDEEP
html
kilsk
kilsk

Reputation: 13

How can I put li elements on the same line?

I'm trying to put all li elements on the same line and separated (left, middle, right), but in the output they are separated but all on different lines.

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

Upvotes: 0

Views: 2363

Answers (1)

Dejan.S
Dejan.S

Reputation: 19118

Display inline does not effect the children only the direct element you add it to, so your ul is inline to it parent elements. You could use display flex to solve that, and space-between solves the align you want.

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

Upvotes: 6

Related Questions