Дисплей li горизонтально с широкими ли элементами

Question

Я пытаюсь отобразить элемент li бок о бок, чтобы я мог превратить его в ползунок содержимого. Поскольку элементы li настолько широки, они не будут отображаться в строке. Я знаю, что я могу расширить ширину ul до необходимой ширины, но мне нужно, чтобы у меня была скрытая маска с переполнением, чтобы она была слайдером.

Here's a fiddle моего исходного кода.

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

Нравится? http://jsfiddle.net/5u2Nj/1/

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

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

Answer 2

Если я правильно помню, плавающие элементы будут нарушать их из традиционной коробки. Вы можете сделать одну из двух вещей, которые приходят на ум, чтобы решить эту проблему.

1. Использование «Дисплей: встроенный блок» вместо поплавка на список ваших элементов
2. Поплавок ваш ул. Выполнение этого должно содержать элементы li, содержащиеся в их контейнере.

В подобных ситуациях я также стараюсь, чтобы элементы li не имели никакого запаса или отступов.

Answer 3

Если конечный результат того, что вы ищете, как предполагается, будет казаться, как будто его в окно, вы должны сделать внутренний контейнер шире.

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

Демо: http://codepen.io/mikevoermans/pen/lhvqC