Make list evenly spaced and inline

Question

I have a html list and I want to make it inline, centered and evenly spaced. Here is the closest I've gotten to the desired result: li { display: inline; font-size: 20px; } div { text-align: center; width: 30vw; }

I just can't get them inline Here is what i want:

MIKE · Answer

For a general approach not using width try .foo li { float: left; padding-right: 10px; } .foo li a { display: block; }

Umutambyi Gad · Answer

Try to use inline-block and the following is its implementation also there is space between them li { display: inline-block; font-size: 20px; } div { text-align: center; width: 30vw; }

Nathan Champion · Answer

I think this is what you're looking for when you said: inline, centered and evenly spaced Note: You'll probably need to open this full-screen. li { display: inline-block; text-align: center; font-size: 20px; width: 33%; } li a { width: 30vw; }

Lelio Faieta · Answer

It is because you have a wrapping div and this is preventing the inline for the li to work properly. If you remove the div (ununsed in your example) it works properly:

li {
  display: inline;
  font-size: 20px;
}

div {
   text-align: center;
   width: 30vw;
}

<ul>
<li><a href="#">Item 1 Lorem Ipsum</a></li>
<li><a href="#">Item 2 Lorem Ipsum</a></li>
<li><a href="#">Item 3 Lorem Ipsum</a></li>
</ul>

Make list evenly spaced and inline

4 Answers

Add your own answers!

Ask a Question