Question

我要求一点帮助。我有这个css滑块，我想将div和图像调整到整个宽度的uvodni-sldr（大约1200px）。请帮我。

HTML CODE

<section class="uvodni-sldr" >
         <div class="slides">
        <ul>
            <li><img src="http://placehold.it/800x252" alt="image01" />
                <div>Promo text #1</div>
            </li>
            <li><img src="http://placehold.it/800x252" alt="image02" />
                <div>Promo text #2</div>
            </li>
            <li><img src="http://placehold.it/800x252" alt="image03" />
                <div>Promo text #3</div>
            </li>
            <li><img src="http://placehold.it/800x252" alt="image04" />
                <div>Promo text #4</div>
            </li>
        </ul>
    </div>

CSS

    .slides {
    height:500px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:900px; }

.slides ul {
    list-style:none;
    position:relative;
} 

@-webkit-keyframes anim_slides {

0% {
    opacity:0;
}

6% {
    opacity:1;
}

24% {
    opacity:1;
}

30% {
    opacity:0;
}

100% {
    opacity:0;
}

}

@-moz-keyframes anim_slides {

0% {
opacity:0;
}

6% {
    opacity:1;
}

24% {
    opacity:1;
}

30% {
    opacity:0;
}

100% {
    opacity:0;
}

}


.slides ul li {
    opacity:0;
    position:absolute;
    top:0;

    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}


.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}

.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}

.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}

.slides ul li img {
    display:block;
}

@-webkit-keyframes anim_titles {

0% {
    left:100%;
    opacity:0;
}

5% {
    left:10%;
    opacity:1;
}

20% {
    left:10%;
    opacity:1;
}

25% {
    left:100%;
    opacity:0;
}

100% {
    left:100%;
    opacity:0;
}

}

@-moz-keyframes anim_titles {

0% {
    left:100%;
    opacity:0;
}

5% {
    left:10%;
    opacity:1;
}

20% {
    left:10%;
    opacity:1;
}

25% {
    left:100%;
    opacity:0;
}

100% {
    left:100%;
    opacity:0;
}

}


.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;

    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

.uvodni-sldr {
    display: block;
    max-height: 400px;
    position: relative;
    overflow: hidden;
    top: 0;
}
section.uvodni-sldr {
    width: 1200px;
    margin: 0 auto;
}

致力于jsFIDDLE

Answer 1

不完全确定你要追求的是什么，但试试这个：

I forked it, so that you can check it out

.slides ul {
  list-style:none;
  position:relative;
  width: 100%;
  margin: 0;
  padding: 0;
} 

.slides ul li, .slides ul li img { 
  width: 100%; 
  margin: 0; 
}

Answer 2

.slides ul {
  width: 100%;
} 

.slides ul li, .slides ul li img { 
  width: 100%; 
  margin: 0; 
}

CSS滑块图像宽度

2 个答案: