Html 使用精确的百分比和字体大小：0来制作完美匹配的网格？

我正在尝试使用完全匹配的整数网格，例如5个菜单项的20%将填充100%

我有以下代码：

#menu-primary-navigation li{display:inline-block;font-size:0;width:20%;}
#menu-primary-navigation li a{font-size:22px;}

我理解

ul li

元素之间存在空格的问题，这意味着20%的元素将不适合100%，因为每个元素之间存在空格。然而，我认为我通过使

字体大小为：0，解决了这个问题元素所在的位置，然后仅设置元素内部的字体大小

然而，您可以在我的JSFIDLE中看到，这五个菜单项仍然不能完全适合容器的100%

在我的示例中，宽度是
600px
，每个元素是
20%
。通过检查元素，我可以看出它们都等于
120px
。那么，为什么最后一个元素总是落在下一行呢

<div class="wrapper">
    <ul id="menu-primary-navigation" class="menu">
        <li class="menu-item">
            <a href="http://localhost/esk/">Home</a>
        </li>
        <li class="menu-item">
            <a href="http://localhost/esk/knitting/">Tutorials</a>
        </li>
        <li class="menu-item">
            <a>Logo</a>
        </li>
        <li class="menu-item">
            <a href="http://localhost/esk/projects/">Projects</a>
        </li>
        <li class="menu-item">
            <a href="http://localhost/esk/articles/">Articles</a>
        </li>
    </ul>
</div>













使用
显示：内联块在这种情况下是出了名的问题。可以考虑使用<代码>显示：表单元格；<代码>以更少的麻烦实现相同的结果

HTML可以保持不变，但请尝试以下CSS：

.wrapper{width:600px;}
ul,li{padding:0;margin:0;}
/* needed for use with display: table-cell; */
.menu{ display: table; width: 100%; }
/* changed to table-cell */
#menu-primary-navigation li{display:table-cell; text-align: center;}
#menu-primary-navigation li a{font-size:22px;}

然而，正如我应该回答的问题一样，您出错的部分是您需要设置父级的字体大小，即
ul
，以实现空白。但是请注意，我认为IE的某些版本不会喜欢
字体大小：0

CSS:

您正在li标记上设置
字体大小：0
，以删除空白。但是，li包含在ul中，因此需要在那里设置字体大小

在JSFIDLE中，通过设置

.wrapper{宽度：600px；}
ul，li{padding:0；margin:0；font size:0}
完美答案。解释了问题并添加了更好解决方案的建议。谢谢
.wrapper{width:600px;}
/* you need it set on the parent */
ul,li{padding:0;margin:0; font-size: 0; }
#menu-primary-navigation li{display: inline-block; width: 20%; text-align: center;}
#menu-primary-navigation li a{font-size:22px;}