<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
我需要一点帮助。我有这个 css slider ，我想将其中的 div 和图像调整为 uvodni-sldr 部分的全宽(大约 1200 像素)。请帮我。
HTML 代码
<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
最佳答案
不完全确定你在追求什么，但试试这个:
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;
}
关于CSS slider 图像宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29288469/
相关文章：
css - 在 IE/Firefox Mobile 和 Firefox Desktop 中显示不同颜色的文本 (!)
javascript - IE 在 JavaScript 运行某些操作时停止工作
webkit - input::-webkit-outer-spin-button 设置 margin-left 并且只在 Chrome 中显示
css - 简单的 CSS : Formatting multiple tables
javascript - 使用动画将元素从一个父元素移动到另一个父元素
javascript - 我可以在另一个动画函数jquery中插入一个动画吗