使用calc（）设置动态宽度无效

Question

我有三个子元素，其确切宽度应为父元素的1/3。我使用了calc（），但是第三个子元素不在一行中...知道吗？

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

那是因为考虑到标记中的空间，因为元素是内联级别块

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>

---

您还可以删除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>

---

另一种选择

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>