jquery - 导航链接之间的额外空间

Question

我的响应式导航链接有一些额外的空间，但没有在 CSS 中的任何地方定义。减少页面宽度后，此空间将被删除。任何人都可以找出额外空间的原因，这让我感到困惑。这是一个 fiddle :http://jsfiddle.net/DjftP/

导航编码如下:

<div id="navigation">
    <div class="chunk-nav-hrz-fxd" data-nav-fxd="200">
        <nav>
            <a>Link1</a>
            <a>Link2</a>
            <a>Link3</a>
            <a>Link4</a>
        </nav>
        <nav class="nav-right">
            <a>Link5</a>
            <a>Link6</a>
        </nav>
    </div>
</div>

减少:

.chunk-nav-hrz-fxd                    {.chunk; padding: 0; .clearfix}
.chunk-nav-hrz-fxd nav                {line-height: 40px; .clearfix; margin-bottom: 0; padding-left: 0; display: inline-block; float: left}
.chunk-nav-hrz-fxd .nav-right         {float: right}
.chunk-nav-hrz-fxd a                  { margin-bottom: 0; padding: @baseline/2 @baseline}
.chunk-nav-hrz-fxd a:hover            {text-decoration: none}
.chunk-nav-hrz-fxd a:last-child       {border-right: 0}

在使用额外空间调整窗口大小之前:

在窗口调整大小并以某种方式删除空间后:

Answer 1

您的导航元素使用 <a>默认显示为 inline 的标签, 所以你的空白被计算在内。

查看此 fiddle .我删除了 HTML 标签之间的所有空格。