CSS - 水平滾動不起作用

我正在開發一個內容滑塊，並且容器寬度爲640px。我的內容溢出了寬度，但水平滾動在Firefox，Chrome或IE中不起作用。CSS - 水平滾動不起作用

HTML

<div id="content"> 

    <!-- start slider --> 
    <section id="featured-slider"> 

     <section id="wrap"> 

      <!-- slide one --> 
      <span id="slide-one" class="slides"> 
       <!-- empty --> 
      </span>   
      <hr id="line-one" class="lines"> 


      <!-- slide two --> 
      <span id="slide-two" class="slides"> 
       <!-- empty --> 
      </span> 
      <!-- (overlap) --> 
      <span id="slide-two-overlap" class="slides"> 
       <!-- empty --> 
      </span> 
      <hr id="line-two" class="lines"> 


      <!-- slide three --> 
      <span id="slide-three" class="slides"> 
       <!-- empty --> 
      </span> 
      <hr id="line-three" class="lines"> 


      <!-- slide four --> 
      <span id="slide-four" class="slides"> 
       <!-- empty --> 
      </span> 
      <hr id="line-four" class="lines"> 


      <!-- slide five --> 
      <span id="slide-five" class="slides"> 
       <!-- empty --> 
      </span> 
      <hr id="line-five" class="lines"> 

     </section> 

     <nav> 
      <!-- empty --> 
     </nav> 

    </section> 
    <!-- end slider --> 

</div> 


</body> 
</html>

CSS

/* GLOBAL 
    ______________________________ 
*/ 

#content #featured-slider { 
    float: left; 
    width: 100%; 
    height: 265px; 
    margin: 75px 0 0 0; 
} 

#content #featured-slider #wrap { 
    float: left; 
    overflow-x: scroll; 
    overflow: -moz-scrollbars-horizontal; 
    width: 640px; 
    height: 245px; 
    margin: 5px; 
} 

#content #featured-slider #wrap .lines { 
    float: left; 
    border: 0; 
    height: 1px;  
    background-color: #DCDCDC; 
} 

#content #featured-slider #wrap .slides { 
    float: left; 
    border-radius: 50%; 
    border: thin dotted #B8B8B8; 
} 



/* CONTENT 
    ______________________________ 
*/ 

/* SLIDE ONE 
    ------------------------------ 
*/ 

#content #featured-slider #wrap #slide-one { 
    width: 50px; 
    height: 50px; 
    margin: 50px 0px; 
} 

#content #featured-slider #wrap #line-one { 
    width: 45px; 
    margin: 110px 7.5px; 

    /* ROTATE */ 
    transform:rotate(21deg); 
    -ms-transform:rotate(21deg); /* IE 9 */ 
    -webkit-transform:rotate(21deg); /* Safari and Chrome */ 
} 


/* SLIDE TWO 
    ------------------------------ 
*/ 

#content #featured-slider #wrap #slide-two { 
    width: 75px; 
    height: 75px; 
    margin: 100px 0px; 
} 

#content #featured-slider #wrap #slide-two-overlap { 
    width: 75px; 
    height: 75px; 
    margin: 125px 0px 0px -35px;; 
} 

#content #featured-slider #wrap #line-two { 
    width: 90px; 
    margin: 135px 9.5px; 

    /* ROTATE */ 
    transform:rotate(-14deg); 
    -ms-transform:rotate(-14deg); /* IE 9 */ 
    -webkit-transform:rotate(-14deg); /* Safari and Chrome */ 
} 


/* SLIDE THREE 
    ------------------------------ 
*/ 

#content #featured-slider #wrap #slide-three { 
    width: 75px; 
    height: 75px; 
    margin: 70px 0px; 
} 

#content #featured-slider #wrap #line-three { 
    width: 60px; 
    margin: 115px 9.5px; 

    /* ROTATE */ 
    transform:rotate(12deg); 
    -ms-transform:rotate(12deg); /* IE 9 */ 
    -webkit-transform:rotate(12deg); /* Safari and Chrome */ 
} 


/* SLIDE FOUR 
    ------------------------------ 
*/ 

#content #featured-slider #wrap #slide-four { 
    width: 40px; 
    height: 40px; 
    margin: 110px 0px; 
} 

#content #featured-slider #wrap #line-four {  
    width: 90px; 
    margin: 115px 9.5px; 

    /* ROTATE */ 
    transform:rotate(-12deg); 
    -ms-transform:rotate(-12deg); /* IE 9 */ 
    -webkit-transform:rotate(-12deg); /* Safari and Chrome */ 
} 


/* SLIDE FIVE 
    ------------------------------ 
*/ 

#content #featured-slider #wrap #slide-five { 
    width: 40px; 
    height: 40px; 
    margin: 110px 0px; 
} 

#content #featured-slider #wrap #line-five {  
    width: 90px; 
    margin: 115px 9.5px; 

    /* ROTATE */ 
    transform:rotate(-12deg); 
    -ms-transform:rotate(-12deg); /* IE 9 */ 
    -webkit-transform:rotate(-12deg); /* Safari and Chrome */ 
} 




/* NAV 
    ______________________________ 
*/ 

#content #featured-slider nav { 
    float: right; 
    width: 180px; 
    height: 65px; 
    border: thin dotted grey; 
    margin: 105px 25px 0 0; 
}

來源

2013-07-02 Kyle.Belanger

因爲你'＃功能-slider'寬度：100％。你需要修正它，當它的孩子變大時=>滾動將出現 – Brian

試着把'width：500px'，看看它是否有效 – Brian

滑塊的內容在一個換行（#wrap）中，它被設置爲一個特定的（640像素）寬度。 –

你需要一個元素包裝這些浮動元素，並給它寬

<section id="wrap_inner"></seciton> 

#wrap_inner{width:640px;}

如果無線DTH是不夠的，浮動元素將轉向下一行

直播：http://jsfiddle.net/fjw5x/5/

來源

2013-07-02 02:52:31 areschen

啊，謝謝，非常感謝 –

CSS - 水平滾動不起作用

回答

相關問題