three li with equal width

Question

I would like to have three li elements with equal width. I used calc, however the code does not work.

width:calc(100%/3);
display:inline-block;

Snippet:

ul {
  position: fixed;
  bottom: 25px;
  left: 5%;
  width: 90%;
}

ul li {
  width: calc(100%/3);
  display: inline-block;
}

ul li:nth-child(2) {
  text-align: center;
}

ul li:nth-child(3) {
  text-align: right;
}

<ul>
  <li><a href="">Phone</a></li>
  <li><a href="">Imprint</a></li>
  <li><a href="">Email</a></li>
</ul>

score 1 · Accepted Answer · answered Feb 25 '21 at 23:47

Use display:flex in ul and flex: 1 in li

body {
  background: lightblue
}

ul {
  list-style: none;
  padding: 0;
  position: fixed;
  bottom: 25px;
  left: 5%;
  width: 90%;
  display: flex;
  background: white;
}

li {
  flex: 1;
  box-shadow: 0 0 0 1px black
}

<ul>
  <li><a href="">Phone</a></li>
  <li><a href="">Imprint</a></li>
  <li><a href="">Email</a></li>
</ul>

three li with equal width

1 Answers1