0

我正在使用伪滑块 jquery，我正在尝试<div/>拉伸。这是我所拥有的：

<div style="position:relative;">
    <div id="slider">
        <ul>
            <li><img src="/wp-content/themes/RatedRnB/SudoSlider/images/test1.jpg" alt="image description"/></li>
            <li><img src="/wp-content/themes/RatedRnB/SudoSlider/images/test2.jpg" alt="image description"/></li>
            <li><img src="/wp-content/themes/RatedRnB/SudoSlider/images/test3.jpg" alt="image description"/></li>
            <li><img src="/wp-content/themes/RatedRnB/SudoSlider/images/test2.jpg" alt="image description"/></li>
            <li><img src="/wp-content/themes/RatedRnB/SudoSlider/images/test3.jpg" alt="image description"/></li>
            <li><img src="/wp-content/themes/RatedRnB/SudoSlider/images/test1.jpg" alt="image description"/></li>
         </ul>
    </div>
</div>

这是CSS

/* Sudo Slider */
#slider ul {
    width: 950px;
    margin-bottom: 0;
    padding-left: 10px;
    list-style: none;
    position: relative;
    display: block;
    vertical-align: top;
}

#slider li {
    padding-left: 20px;
}

/* Uncomment this if you wan't to only have 1 visible slide before the javascript kicks in. 
#slider li {display:none;}  
#slider li:first-child {display:block;}
*/

#slider {
    width: 950px;
    height: 272px;
    overflow: hidden;
    background: transparent;
}
     /* // Sudo Slider */
     /* Numeric Navigation */
ol {
    margin: 1em 0;
    padding: 0;
    height: 28px;
}

ol li {
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 28px;
    line-height: 28px;
}

ol li a {
    float: left;
    height: 28px;
    line-height: 28px;
    border: 1px solid   #ccc;
    background: #DAF3F8;
    color: #555;
    padding: 0 10px;
    text-decoration: none;
}

ol li.current a {
    background: #5DC9E1;
    color: #fff;
}

ol li a:focus, .prevBtn a:focus, .nextBtn a:focus {
    outline: none;
}

.graphic, .prevBtn, .nextBtn {
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    text-indent: -8000px;
}

.prevBtn, .nextBtn {
    display: block;
    width: 35px;
    height: 101px;
    position: absolute;
    left: -21px;
    top: 71px;
    z-index: 1000;
    background: url(../images/left.png) no-repeat 0 0;
    cursor: pointer;
}

.nextBtn {
    left: 968px;
}

.nextBtn {
    background: url(../images/right.png) no-repeat 0 0;
}

pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

问题是我将滑块设置为widthof950px但它没有显示为 950 的宽度。它只保持图像的宽度。谁能告诉我我做错了什么。

查看滑块

4

1 回答 1

1

<ul>and<li>确实950px很宽（不包括and margin）padding，但是您看不到它们，因为没有什么可显示的——没有background-color或什么。您可以通过添加一个来测试它background-color：

#slider li {
    background: #E7E7E7;
}
于 2013-05-24T01:46:00.817 回答