顯示li與寬李元素水平

我試圖顯示一個li元素並排，以便我可以把它變成一個內容滑塊。由於li元素太寬，他們不會內聯顯示。我知道我可以將ul的寬度擴大到所需的寬度，但是我需要那個隱藏溢流的遮罩，以便它將成爲滑塊。顯示li與寬李元素水平

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

來源

2013-07-26 David

是否這樣？ http://jsfiddle.net/5u2Nj/1/

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

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

來源

2013-07-26 18:49:48

我認爲他的意思就像一個幻燈片（容器實際上不像其內容的總和;它有一個可見部分大小的一個項目），可能用箭頭來改變可見項 – Trojan

不完全。它們並不是並排的。我試過了這個空白區域：不換行但是無濟於事。我也嘗試了內聯塊 – David

@ user2623887上面的評論是否正確？或者[this]（http://jsfiddle.net/5u2Nj/3/）更接近？你想要一個水平滾動條來改變當前視圖嗎？ – Trojan

如果我沒有記錯，浮動元素會打破他們脫離傳統的盒子。你可以做一些想到的事情來解決這個問題。

使用「display：inline-block的」，而不是在你的列表元素
浮球您的UL認證。這樣做應該保持其容器內的元素。

在類似情況下，我也嘗試確保li元素沒有任何邊距或填充。

來源

2013-07-26 18:49:45 amhaskar

我試圖浮動UL，但似乎並沒有這樣的伎倆。我也嘗試顯示內聯塊。這看起來像一個相對常見的滑塊。我肯定錯過了什麼。 – David

如果你在找什麼最後的結果應該是看起來好像它在一個窗口中，你將不得不作出內部容器寬。

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

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

來源

2013-07-26 18:54:03 mikevoermans

好點！我其實之前試過，問題是我需要它是一個設置寬度來創建一個掩碼來隱藏其他幻燈片。也許我錯過了一些東西，還有更好的方法來做到這一點？ – David

顯示li與寬李元素水平

回答

相關問題