CSS - 水平滚动不起作用

Question

我正在开发一个内容 slider ，容器宽度为 640 像素。我的内容超出了宽度，但水平滚动在 Firefox、Chrome 或 IE 中不起作用。

直播:http://jsfiddle.net/fjw5x/1/

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;
}

Answer 1

你需要一个元素包裹这些 float 元素并给它宽度

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

#wrap_inner{width:640px;}

如果宽度不够，float元素会翻到下一行

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