Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/88.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 导航链路之间的额外空间_Jquery_Html_Css - Fatal编程技术网

Jquery 导航链路之间的额外空间

Jquery 导航链路之间的额外空间,jquery,html,css,Jquery,Html,Css,我有一些额外的空间来放置CSS中没有定义的响应导航链接。缩小页面宽度后,此空间将被删除。有谁能找出额外空间的原因,这让我感到困惑。这是一把小提琴: 导航代码如下所示: <div id="navigation"> <div class="chunk-nav-hrz-fxd" data-nav-fxd="200"> <nav> <a>Link1</a> <a>

我有一些额外的空间来放置CSS中没有定义的响应导航链接。缩小页面宽度后,此空间将被删除。有谁能找出额外空间的原因,这让我感到困惑。这是一把小提琴:

导航代码如下所示:

<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>
在使用额外空间调整窗口大小之前:

在删除空间后调整窗口大小:


您的导航元素使用
。在这里,我删除了HTML标记之间的所有空白。

您的nav元素使用
。在这里,我删除了HTML标记之间的所有空白。

您的元素是inline block,这赋予了block元素和inline元素的属性

内联属性之一是空白字符。当HTML正在编译时。它将每个空格字符编译成一个空格(除了
pre
元素)。返回字符、制表符和空格都编译为空白,并创建可见的空格。查看以查看所述行为

但您可以使用DOM操纵方法调整函数的大小。使用这些方法时,它不会像源代码那样创建新行字符或表格。这就是为什么调整大小后不显示空白

解决方案:触发调整大小

您的元素是内联块,这也给出了块元素和内联元素的属性

内联属性之一是空白字符。当HTML正在编译时。它将每个空格字符编译成一个空格(除了
pre
元素)。返回字符、制表符和空格都编译为空白,并创建可见的空格。查看以查看所述行为

但您可以使用DOM操纵方法调整函数的大小。使用这些方法时,它不会像源代码那样创建新行字符或表格。这就是为什么调整大小后不显示空白

解决方案:触发调整大小

我仍然在小提琴中看到空白。你指的是哪一个空白?@BradleyTrager可能是链接5和6之间的空白?这似乎起到了作用,但你能解释一下我在哪里设置了内联块吗?谢谢@Alex
.img缩略图{}
had
display:inline块设置。我仍然在小提琴中看到空白。你指的是哪一个空白?@BradleyTrager可能是链接5和6之间的空白?这看起来确实奏效了,但你能解释一下我在哪里设置了内联块吗?谢谢@Alex
.img缩略图{}
had
display:inline块设置。您的小提琴可能重复的部分与您发布的代码稍有不同。您的小提琴可能重复的部分与您发布的代码稍有不同。
.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}
$(window).smartresize(function () {
    checkSize()
}).trigger('resize');