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

問題は、スライダーをwidthof に設定している950pxのに、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 に答える