Question

在我将Anythingslider放入我的网页后，在我尝试调整幻灯片的宽度以匹配页面后，页面最终会像这样 - ＆gt; http://i.imgur.com/5AlHR.png 我试过搞乱任何滑块CSS，而我自己却不知道我能做什么。有什么想法吗？

HTML：

 <div id = "bodyContent-container">
    <div id = "bodyContent">
         <div id = "bands-container">
                <div id = "bands">            
                    <img src="images/slide.jpg" width="960" height="300"/>
                    <img src="images/slide-2.jpg" width="960" height="300" />
                    <img src="images/slide-3.jpg" width="960" height="300"/>
                </div>
         </div>
     </div> 
</div>

CSS：

div#bodyContent-container { 
        width:100%;
        height: 100%;
        min-height:1200px;
        background:#f3f3f3;
        margin: 0 auto;
        padding: 0;
  }
 div#bodyContent {
        width:960px;
        height:100%;
        min-height:1200px;
        margin: 0 auto;
         padding: 0;
        -webkit-box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #888;
        -moz-box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #888; /* Firefox 3.6 and earlier */
        box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #888;
     padding-top: 250px;
   }
   div#bands-container {
         width: 960px;
         height:300px;
         margin: 0 auto;    
         padding: 0;
   }
   div#bands {
         width: 960px;
         height: 300px;
         margin: 0 auto;
         padding-right: 30px;   
   }

网站页面：http://andrewgu12.kodingen.com/graphicDesign 谢谢！

Answer 1

你最喜欢这里编辑：极简主义圆形主题

原始：

/******************
  SET STYLING HERE
 ******************
 =================================
 Default state (no keyboard focus)
 ==================================*/
/* Overall Wrapper */
.anythingSlider-minimalist-round {
    margin: 0 auto;
    /* 30px right & left padding for the navigation arrows */
    padding: 0 30px;
}

到：

/******************
  SET STYLING HERE
 ******************
 =================================
 Default state (no keyboard focus)
 ==================================*/
/* Overall Wrapper */
.anythingSlider-minimalist-round {
    margin: 0 auto;
    /* 30px right & left padding for the navigation arrows */
    padding: 0;
}

Answer 2

... 现在

移至填充 left或right padding:0 30px;

将 30px替换为0

样式表 theme-minimalist-round.css 行号：25

这样做

.anythingSlider-minimalist-round {
    margin: 0 auto;
    padding: 0 ;
}

Answer 3

只需删除anythingSlider-minimalist-round class的填充属性

Anythingslider导致宽度问题

3 个答案: