Question

我正在尝试并排显示li元素，以便将其转换为内容滑块。由于li元素太宽，因此不会显示内联。我知道我可以将ul宽度扩展到所需的宽度，但是我需要一个隐藏溢流的掩模，这样它就是一个滑块。

HTML：

<div class="slider">
    <ul>
        <li>
            <div class="video"><iframe src="http://player.vimeo.com/video/70965217?title=0&amp;byline=0&amp;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&amp;byline=0&amp;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;
}

Answer 1

如果我没记错的话，浮动元素会将它们从传统的盒子中分离出来。你可以做一些想到解决这个问题的事情之一。

在列表元素上使用“display：inline-block”而不是float
浮动你的ul。这样做应该保持li元素包含在容器中。

在类似的情况下，我也会尝试确保li元素没有任何边距或填充。

Answer 2

喜欢这个？ http://jsfiddle.net/5u2Nj/1/

.slider > ul {
    white-space: nowrap;
}

.slider > ul > li {
    display: inline-block;
    white-space:normal;
 }

Answer 3

如果您要查找的最终结果应该显示为在窗口中，则必须使内部容器更宽。

/* Some arbitrary large number to hold the width of your li items */
.slider > ul { width: 10000px; }

演示： http://codepen.io/mikevoermans/pen/lhvqC

使用宽li元素水平显示li

3 个答案: