jquery - li,ul 类对象不会调整

Question

我正在使用伪 slider jquery，我正在尝试获取 <div/>拉伸(stretch)。这是我所拥有的:

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

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

Check out the slider

Answer 1

<ul>和 <li>确实是950px宽(不包括 margin 和 padding )，但你看不到它们，因为没有什么可显示的——没有 background-color或任何东西。您可以通过添加 background-color 来测试它:

#slider li {
    background: #E7E7E7;
}