0

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;
}
4

3 に答える 3

0

私の記憶が正しければ、浮動要素は従来の箱からそれらを打ち破ります。この問題を解決するために頭に浮かぶいくつかのことのいずれかを行うことができます。

  1. リスト要素でフロートの代わりに「display: inline-block」を使用する
  2. あなたのulを浮かべてください。これを行うと、コンテナ内に含まれる li 要素が保持されます。

同様の状況で、li 要素にマージンやパディングがないようにしています。

于 2013-07-26T18:49:45.043 に答える
0

このような？http://jsfiddle.net/5u2Nj/1/

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

.slider > ul > li {
    display: inline-block;
    white-space:normal;
 }
于 2013-07-26T18:49:48.683 に答える
0

探しているものの最終結果がウィンドウ内にあるかのように表示されることになっている場合は、内側のコンテナーをより広くする必要があります。

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

デモ: http://codepen.io/mikevoermans/pen/lhvqC

于 2013-07-26T18:54:03.110 に答える