utworzyć pojedynczy wiersz elementów div z poziomymi paskami przewijania

Question

Dobrze, więc pomyślałem, że naprawiłem to za pomocą białej przestrzeni: bez opaski działało w chromie, ale nic więcej.

mam coś takiego:

<div class="outer"> 
    <ul> 

     <li> 
      <div class="inner"> 
      <a href="#"><img src="eg1.jpg" /></a> 
      <br /> 
      EG1 lorem ipsum 
      </div> 
     </li> 

     <li> 
      <div class="inner"> 
      <a href="#"><img src="eg2.jpg" /></a> 
      <br /> 
      EG2 lorem ipsum 
      </div> 
     </li> 
. 
. 
. 
//etc (multiple li's) 

</ul> 

</div> 

usprawiedliwiać bardzo słabe zdjęcia, ale to im efect dążenie do.

Potrzebuję pojedynczego rzędu "przedmiotów", jeśli przekraczają one szerokość, a następnie powinny pojawiać się poziome paski przewijania.

nadzieja, która ma sens, jak mogę to osiągnąć?

Answer 1

Napisz tak:

.outer{ 
    width:400px; 
    overflow:auto; 
    white-space:nowrap; 
} 
.outer li{ 
    display: inline-block; 
    *display: inline;/*For IE7*/ 
    *zoom:1;/*For IE7*/ 
    vertical-align:top; 
    width:40px; 
    margin-right:20px; 
    background:red; 
    white-space:normal; 
} 

Sprawdź to http://jsfiddle.net/ZrpHv/

Answer 2

Wiem, że każdy dobry i purystyczny webdeveloper będzie mnie nienawidził (i nienawidzę mnie, gdy zamieszczam coś takiego), ale możesz po prostu użyć tabeli, aby to zrobić.

to działa we wszystkich przeglądarkach. Tak, to nie jest standard, nie to nie jest CSS. Ale ... wydajność jest czasami lepsza niż standardowa.

Można również użyć stałej szerokości div dla swojego kontenera (ul). i używać pływaka lewo pozycja dla wszystkich dzieci

Answer 3

trzeba umieścić jeden ogromny poziomej div wewnątrz div z przepełnienie: auto; Pozwoli to na unoszenie się w lewo bez owijania do następnej linii, i będzie przewijane tylko wtedy, gdy przekroczona zostanie granica div jednostki.

Answer 4

Musisz ustawić Ci div.inner szerokości do czegoś absolutnego jak 64px i Nakręć li s pływaka albo w prawo lub w lewo, a następnie ustawić właściwość Twojego div overflow-x do auto. sprawdź to: fiddle