导航链接之间的额外空间

时间:2014-03-19 12:59:54

标签: jquery html css

我有一些额外的空间用于我的响应式导航链接,这些链接未在CSS中的任何位置定义。在减小页面宽度后删除此空间。任何人都可以确定额外空间的原因,令我感到困惑。这是一个小提琴: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>

LESS:

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

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

enter image description here

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

enter image description here

2 个答案:

答案 0 :(得分:3)

您的导航元素使用<a>标记,其默认显示为inline,因此您的空白正在计算中。

fiddle。我删除了HTML标记之间的所有空格。

答案 1 :(得分:1)

你的元素是内联块,它给出了块元素和内联的特性。

其中一个内联属性是空格字符。 HTML正在编译时。它将每个空白字符编译成一个空格(pre个元素除外)。返回字符,制表和空格都被编译为空格并创建可见空间。请参阅this fiddle以查看上述行为。

但是你调整大小的函数是使用DOM操作方法。使用这些方法时,它不会像源代码那样创建换行符或制表符。这就是为什么在调整大小后不显示空格的原因。

解决方案:触发调整大小

$(window).smartresize(function () {
    checkSize()
}).trigger('resize');

http://jsfiddle.net/DjftP/1/