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元素之间空白的问题，这意味着由于每个元素之间的空白区域，20％的元素将不适合100％。但是我认为我已经解决了这个问题，让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，以便影响空白区域。请注意，我认为某些版本的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}

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

2 个答案: