我正在尝试并排显示 li 元素,以便可以将其变成内容滑块。因为 li 元素太宽了,它们不会内联显示。我知道我可以将 ul 宽度扩展到所需的宽度,但是我需要一个隐藏溢出的掩码,以便它成为一个滑块。
HTML:
<div class="slider">
<ul>
<li>
<div class="video"><iframe src="http://player.vimeo.com/video/70965217?title=0&byline=0&portrait=0" width="692" height="389" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div class="videotext">
<div class="videotexttitle">
<p>Student Stories</p>
</div>
<div class="videotextcopy">
<p>At autsdf la veleniet lam fuga.Et modit quiae volesti onetumquib us est laut is aute ndant andia dolupti abor sectate aspernat dempor aut qui aut volorerchit,
si officat emquissit eatem. At aut la veleniet lam fuga.Et modit quiae volesti onetumquib us est laut is aute ndant andia dolupti abor sectate aspernat dempor aut qui aut volorerchit,
si officat emquissit eatem. </p>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="video"><iframe src="http://player.vimeo.com/video/70965217?title=0&byline=0&portrait=0" width="692" height="389" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div class="videotext">
<div class="videotexttitle">
<p>Student Stories</p>
</div>
<div class="videotextcopy">
<p>At autsdf la veleniet lam fuga.Et modit quiae volesti onetumquib us est laut is aute ndant andia dolupti abor sectate aspernat dempor aut qui aut volorerchit,
si officat emquissit eatem. At aut la veleniet lam fuga.Et modit quiae volesti onetumquib us est laut is aute ndant andia dolupti abor sectate aspernat dempor aut qui aut volorerchit,
si officat emquissit eatem. </p>
</div>
</div>
<div class="clear"></div>
</ul>
CSS
.slider {
width: 1099px; height: 423px;
overflow: visible;
position: relative; /* for overflow: hidden to work in IE7 */
}
.slider > ul {
position: relative;
margin: 0; padding: 0;
}
.slider > ul > li {
float: left;
width: 1099px; height: 423px;
}
iframe.actvideo{
padding:16px;
}
.video{
float:left;
background: url('images/videoround.png');
width:724px;
height:423px;
}
.videotext{
float:right;
width:301px;
}