使用calc（）设置动态宽度无效[重复]

Question

此问题已经在这里有了答案：

How do I remove the space between inline-block elements?（39个答案）

关闭11秒前。

我有三个子元素，其确切宽度应为父元素的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>