Question

我正在设计一个网站，我希望标题的高度为 100px ，并且在其下方有一个 jQuery滑块。我决定使用 Jssor Slider ，因为我喜欢它的表现方式。当我运行我的网站时，随着我增加浏览器窗口的宽度，滑块容器会增加标题下方的空白区域。

我不确定为什么会发生这种情况，我尝试通过输入 white-space：nowrap ＆amp;来解决这个问题。滑块容器本身内的显示：内联块，但仍无效。

HTML：

<header>
<!-- Header elements inside here -->
</header>

<!--Begin Jssor Slider -->

<div id="slider1_container" style="position: relative; margin: 0 auto;
    top: 0px; left: 0px; width: 1300px; height: 600px; overflow: hidden;white-space:nowrap;display:inline-block;">


    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 150px; width: 1300px;
        height: 600px; overflow: hidden;">
<!--Additional Slider divs for containing pictures, arrows, etc. -->
    </div>
</div>

CSS：

header {
    background: #FFF;
    height:100px;
    position:fixed;
    z-index:100;
    width:100%;
}

任何帮助将不胜感激！谢谢。

Answer 1

<强>更新

我刚刚意识到您使用了display:inline-block;，这是导致您的保证金的原因，您可以删除它，将其更改为display:table;或给出-4px的负余量，这将消除空白两者之间的空间。您可能需要根据需要调整负余量，但它可以解决问题。

您可以找到有关Fighting the Space Between Inline Block Elements HERE

的更多信息

Answer 2

看起来您的滑块绝对定位。为什么不将top属性降低为top:100px;之类的内容？你可以根据自己的喜好减少/增加它。

CSS删除标题和jQuery滑块之间的空白区域

2 个答案: