Question

标题可能听起来令人困惑，但我不知道更好的标题。

我在排队nav栏时遇到了麻烦。 a标签中有4个在它们的位置，第5个位于第一个标记之下。

这是我的代码：

<nav>
    <a href='#'>1</a>
    <a href='#'>2</a>
    <a href='#'>3</a>
    <a href="#">4</a>
    <a href="#">5</a>
</nav>

CSS：

a {
    display: inline-block;
    width: 20%;
}

一些简单的数学运算会使5 * 20％= 100％。这个事实，包括没有margin，padding，border或其他什么的事实让我质疑最新情况。

任何可以帮我解决这个问题的人？

Answer 1

这是display: inline-block;的常见问题。此属性在内容元素之间添加一个不间断的空间，导致溢出。为避免这种情况，请向内容添加margin-left: -4px;。或者，您也可以从第一个元素中删除边距并垂直对齐内容，如下所示：

方法1：

＆＃13;

a {
    display: inline-block;
    width: 20%;
    margin-left: -4px;
    vertical-align: top;
}
a:nth-of-type(1) {
    margin: 0;
}

＆＃13;

<nav>
    <a href='#'>1</a>
    <a href='#'>2</a>
    <a href='#'>3</a>
    <a href="#">4</a>
    <a href="#">5</a>
</nav>

＆＃13;

参考： Fighting the space between inline-block elements

方法2：

这个有点尴尬，但也有效。将每个元素的开始标记与前一个元素的结束标记对齐。

＆＃13;

a {
    display: inline-block;
    width: 20%;
    vertical-align: top;
}

＆＃13;

<nav>
    <a href='#'>1</a><a href='#'>
    2</a><a href='#'>
    3</a><a href="#">
    4</a><a href="#">
    5</a>
</nav>

＆＃13;

在这种情况下，删除空格而不编辑元素的边距。或者，您也可以将vertical-align: top;属性保留在此处。

方法3：

第三个也是最后一个方法是在每个锚标签上使用float: left。然而，这确实伴随着一些需要注意的警告。最值得注意的问题是，此内容超出正常元素框模型流的原因（即父元素的width和height将分别为0和0）。为了适应这种情况，您需要添加一个明确的修复值，如下面的链接所示：

＆＃13;

a {
    width: 20%;
    float: left;
}

.group:after {
    content: "";
    display: table;
    clear: both;
}

＆＃13;

<nav class="group">
    <a href='#'>1</a>
    <a href='#'>2</a>
    <a href='#'>3</a>
    <a href="#">4</a>
    <a href="#">5</a>
</nav>

＆＃13;

将班级group分配给<nav>元素，以解决上述浮动问题。

参考： Force elements to self-clear its children

Answer 2

HTML中的空格正在注册并导致溢出。尝试将float: left添加到a样式。

Answer 3

css从20变为19：

width: 19%;