0

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;
}
<ul>
<li><div><a href="#">Item 1 Lorem Ipsum</a></div></li>
<li><div><a href="#">Item 2 Lorem Ipsum</a></div></li>
<li><div><a href="#">Item 3 Lorem Ipsum</a></div></li>
</ul>

I just can't get them inline

Here is what i want:

Makyen
  • 31,849
  • 12
  • 86
  • 121
Nobert
  • 163
  • 1
  • 16

4 Answers4

2

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;
}
<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>
Nathan Champion
  • 1,291
  • 1
  • 14
  • 23
2

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;
}
<ul>
<li><div><a href="#">Item 1 Lorem Ipsum</a></div></li>
<li><div><a href="#">Item 2 Lorem Ipsum</a></div></li>
<li><div><a href="#">Item 3 Lorem Ipsum</a></div></li>
</ul>
Umutambyi Gad
  • 4,082
  • 3
  • 18
  • 39
0

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>
Lelio Faieta
  • 6,457
  • 7
  • 40
  • 74
0

For a general approach not using width try

.foo li {
  float: left;
  padding-right: 10px;
}
.foo li a {
  display: block;
 }

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