Question

我正在制作一个全宽滑块但具有特定高度（500px）。这个滑块在菜单之后，我试图将滑块保持在div内，但它不起作用，内容浮动在div之外。如何将内容保存在div中？

这是我的代码。

HTML

<div id="container">
    <div id="header">
        <h1>Easy Slider jQuery Plugin - continuous demo</h1>
    </div>
    <div id="content">
        <div id="slider">
            <ul>                
                <li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
                <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
                <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
                <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
                <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>          
            </ul>
        </div>
    </div>  
</div>

的 CSS

#container {    
    margin: 0 auto;
    position: relative;
    text-align: left;
    width: 696px;
    background: #fff;       
    margin-bottom: 2em;
}   
#header {
    height: 80px;
    line-height: 80px;
    background: #5DC9E1;
    color: #fff;
}               
#content{
    position: relative;
}           

/* Easy Slider */
#slider ul, #slider li,
#slider2 ul, #slider2 li {
    margin: 0;
    padding: 0;
    list-style: none;
}
#slider2 {
    margin-top: 1em;
}
#slider li, #slider2 li { 
    /* 
        define width and height of list item (slide)
        entire slider area will adjust according
        to the parameters provided here
    */ 
    width: 100%;
    height: 500px;
    overflow: hidden; 
}

#prevBtn, #nextBtn,
#slider1next, #slider1prev { 
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    top: 71px;
    z-index: 1000;
}   
#nextBtn, #slider1next { 
    left: 696px;
}                                                       
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a {  
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(../images/btn_prev.gif) no-repeat 0 0;  
}   
#nextBtn a, #slider1next a { 
    background: url(../images/btn_next.gif) no-repeat 0 0;  
}

Answer 1

这不需要jQuery。
请改用：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.slider{
   overflow:auto;
   height: 50px;
   width:50px;
}
</style>
</head>
<body>
<div class="slider">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
    <div>Item 11</div>
    <div>Item 12</div>
</div>
</body>

不要在类中使用#id，使用class =“classname”，在css：.classname中，请参阅示例。

在div中保留全宽度滑块

1 个答案: