javascript - CSS 删除标题和 jQuery slider 之间的空白

Question

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

我不太确定为什么会这样，我尝试通过放入 white-space:nowrap 和 display:inline-block 来玩转 CSS在 slider 容器本身内，但这仍然不起作用。

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

看起来您的 slider 已绝对定位。为什么不将 top 属性减少到类似 top:100px; 的值？您可以根据自己的喜好减少/增加它。