html - 用宽 li 元素水平显示 li

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

如果我没记错的话，浮动元素会将它们打破传统的框框。你可以做一些想到的事情来解决这个问题。

1. 在列表元素上使用“显示：内联块”而不是浮动
2. 浮动你的 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