Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] float: left ale w jednej linii + scroll
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
phpion
Hej,
mam taki kod:
  1. <div id="list">
  2. <ul>
  3. <li><nobr><img class="icon" src="/images/icons/folder.png" alt="Folder" /> ..</nobr></li>
  4. <li><nobr><img class="icon" src="/images/icons/folder.png" alt="Folder" /> img</nobr></li>
  5. <li><nobr><img class="icon" src="/images/icons/folder.png" alt="Folder" /> kola</nobr></li>
  6. <li><nobr><img class="icon" src="/images/icons/folder.png" alt="Folder" /> tresc</nobr></li>
  7. <li><nobr><img class="icon" src="/images/icons/page_white_compressed.png" alt="Page_white_compressed" /> czes</nobr></li>
  8. <li><nobr><img class="icon" src="/images/icons/page_white.png" alt="Page_white" /> delta</nobr></li>
  9. <li><nobr><img class="icon" src="/images/icons/page_white.png" alt="Page_white" /> engine</nobr></li>
  10. <li><nobr><img class="icon" src="/images/icons/page_white_word.png" alt="Page_white_word" /> formularz_osobowy</nobr></li>
  11. </ul>
  12. <ul>
  13. <li><nobr><img class="icon" src="/images/icons/page_white_text.png" alt="Page_white_text" /> gb</nobr></li>
  14. <li><nobr><img class="icon" src="/images/icons/page_white.png" alt="Page_white" /> index</nobr></li>
  15. <li><nobr><img class="icon" src="/images/icons/page_white_acrobat.png" alt="Page_white_acrobat" /> javxm3-13</nobr></li>
  16. <li><nobr><img class="icon" src="/images/icons/page_white_text.png" alt="Page_white_text" /> licznik</nobr></li>
  17. <li><nobr><img class="icon" src="/images/icons/page_white_acrobat.png" alt="Page_white_acrobat" /> CV</nobr></li>
  18. <li><nobr><img class="icon" src="/images/icons/page_white.png" alt="Page_white" /> niespodzianka</nobr></li>
  19. <li><nobr><img class="icon" src="/images/icons/page_white_compressed.png" alt="Page_white_compressed" /> Nowy folder</nobr></li>
  20. <li><nobr><img class="icon" src="/images/icons/page_white.png" alt="Page_white" /> pion</nobr></li>
  21. </ul>
  22. <ul>
  23. <li><nobr><img class="icon" src="/images/icons/page_white_word.png" alt="Page_white_word" /> symfony</nobr></li>
  24. <li><nobr><img class="icon" src="/images/icons/page_white_acrobat.png" alt="Page_white_acrobat" /> symfony</nobr></li>
  25. <li><nobr><img class="icon" src="/images/icons/page_white_acrobat.png" alt="Page_white_acrobat" /> thija4-1</nobr></li>
  26. <li><nobr><img class="icon" src="/images/icons/page_white_text.png" alt="Page_white_text" /> zf</nobr></li>
  27. <li><nobr><img class="icon" src="/images/icons/page_white_word.png" alt="Page_white_word" /> zf2</nobr></li>
  28. </ul>
  29. </div>

oraz style:
  1. #list {
  2. background-color: #FFFFFF;
  3. border: 1px #CCCCFF solid;
  4. height: 165px;
  5. margin: 5px 0px 5px 0px;
  6. overflow: scroll;
  7. width: 400px;
  8. }
  9. #list ul {
  10. float: left;
  11. list-style: none;
  12. width: 160px;
  13. }

Problem leży w tym, że ta trzecia lista ląduje pod pierwszą, natomiast chciałbym osiągnąć efekt aby pozostała obok drugiej. Ogólnie chcę zrobić coś na wzór okienka Otwórz ale z plikami znajdującymi się na serwerze. Dlatego chciałbym aby wszystkie listy znajdowały się obok siebie i aby w div#list pojawił się poziomy scroll do przesuwania zawartości diva. Może zobrazuję to wizualnie:
  1. lista1 lista2 ... listaN

a aktualnie układa się to tak:
  1. lista1 lista2
  2. ... listaN

Da się w jakiś sposób ustawić aby elementy zawsze układały się obok siebie, a nie schodziły niżej jeśli brakuje miejsca na szerokość?
Zajec
Zaskoczyłeś mnie, nie mam pojęcia jak to osiągnąć. Gdyby ktoś chciał okrojony live example: http://zajec.net/test/floated.in.horizontal

Załatwiłem to małym hackiem, dodając DIVa - containera - bezpośrednio do listy z ustaloną szerokością. Zobacz powyższy example. Minusem jest, że za każdym razem trzeba obliczyć width, którego będziesz potrzebował :-|
phpion
Dzięki! Tą szerokość div'a obliczę sobie w php i wyświetlę jako style inline smile.gif dzięki!
Kreton
Może to coś przybliży : http://www.alistapart.com/articles/multicolumnlists/
Zajec
Cytat(Kreton @ 26.07.2007, 00:05:06 ) *


Przeczytaj najpierw temat, w którym "doradzasz" :-| Artykuł na alistapart nie ma nic wspólnego z overflow'em.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.