删除背景div上的水平滚动条 [英] Remove horizontal scroll bar on background div

问题描述

我正在使用Supersized jquery插件来创建背景图像和文本的幻灯片放映.我的问题是我需要将图像设置为1200px.创建我想要的外观没有问题，但是，我无法确定如何删除水平滚动条.

这是我正在工作的网站: http://atriaseniorliving.com/roslyntest/

这是CSS:

#supersized {  
  display:block; 
  position:absolute; 
  left:50%; 
  top:38px; 
  margin-left:-600px; 
  overflow-x:hidden; 
  z-index:-999; 
  height:472px; 
  width:1200px; 
}

#supersized li {
  display: block;
  height: 472px;
  left: 0;
  list-style: none outside none;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -30;
}

我弄清楚如何删除滚动条的唯一方法是使width:100％，然后添加max-width:1200px.但是，当我这样做时，当减小浏览器宽度时，背景图像就会向左滑动.

任何帮助将不胜感激.

解决方案

好的，我相信我已经找到了解决方案.我需要在#supersized ul周围添加一个容器div并将其设置为溢出:隐藏.

I am using the Supersized jquery plugin to create a slide show of background images and text. My problem is that I need my image to have a set with of 1200px. I have no problem creating the look I want, however, I cannot figure how to remove the horizontal scroll bar.

Here is the site I am working on: http://atriaseniorliving.com/roslyntest/

Here is the css:

#supersized {  
  display:block; 
  position:absolute; 
  left:50%; 
  top:38px; 
  margin-left:-600px; 
  overflow-x:hidden; 
  z-index:-999; 
  height:472px; 
  width:1200px; 
}

#supersized li {
  display: block;
  height: 472px;
  left: 0;
  list-style: none outside none;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -30;
}

The only way I have figured out how to remove the scroll bar is to make the width:100% and then add a max-width:1200px. However, when I do that the background image then slides to the left when you decrease the browser width.

Any help would be appreciated.

解决方案

Ok, I believe I figured out the solution. I needed to add a container div around the #supersized ul and set that to overflow: hidden.

这篇关于删除背景div上的水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！