使用精确的百分比和 font-size:0 来制作完美匹配的网格？

Question

我正在尝试使用完全匹配的整数网格，例如 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 元素之间 whitespace 的问题，这意味着 20% 的元素由于白色 space 在每个元素之间。但是我认为我已经通过在元素所在的位置设置 font-size:0; 然后仅在元素内设置字体大小来解决这个问题。

但是您可以在我的 JSFiddle 中看到五个菜单项仍然不能 100% 完全适合容器。

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

<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>

http://jsfiddle.net/franhaselden/kq9o4t0v/

Answer 1

在这种情况下使用 display: inline-block; 是众所周知的问题。您可以考虑使用 display: table-cell; 以更少的麻烦获得相同的结果。

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 以影响白色-space .但是请注意，我认为某些版本的 IE 不喜欢 font-size: 0;

CSS:

.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;}

Answer 2

您正在 li 标签上设置 font-size:0 以删除空格。但是 li 包含在 ul 中，因此您需要在那里设置字体大小。

在您的 jsfiddle 中，通过设置

解决了问题

.wrapper{width:600px;} ul,li{padding:0;margin:0;font-size:0}

使用精确的百分比和 font-size:0 来制作完美匹配的网格？

Using exact percentages and font-size:0 to make grids that fit perfectly?

html

css

responsive-design

whitespace