Set dynamic width by using calc() doesn't work

Question

I have three child elements which should have an exact width of 1/3 of the parent element. I used calc() but the third child element is not in line... any idea?

ul {
  background:yellow;
  color:black; }

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

<ul>
  <li>hello</li>
  <li>ciao</li>
  <li>goodbye</li>
</ul>

Answer 1

That's because there's space in the markup that taken into account because the element are inline level blocks

ul {
  background: yellow;
  color: black;
  /* remove the font size on the parent so the spaces don't appear */
  font-size: 0;
}

ul li {
  width: calc(100% / 3);
  display: inline-block;
  text-align: center;
  /* put it back on the elements*/
  font-size: 16px;
}

<ul>
  <li>hello</li>
  <li>ciao</li>
  <li>goodbye</li>
</ul>

---

Also you can remove the space in the html

ul {
  background: yellow;
  color: black;
}

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

<ul>
  <li>hello</li><li>ciao</li><li>goodbye</li>
</ul>

---

Another alternative

ul {
  background: yellow;
  color: black;
}

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

<ul>
  <li>hello</li><!--
  ---><li>ciao</li><!--
  ---><li>goodbye</li>
</ul>