我有三个子元素，其确切宽度应为父元素的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>
使用calc（）设置动态宽度无效
•
问答
abiaoa 回答：使用calc（）设置动态宽度无效
那是因为考虑到标记中的空间，因为元素是内联级别块
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>