Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: mieszanie elementów blokowych i liniowych
Forum PHP.pl > Forum > Po stronie przeglądarki
lewal
Witam,

jeśli elementom listy nadamy styl "display: inline;" to będą one wyświetlane w poziomie... przynajmniej tak dopóki nie wstawimy w nie jakiegoś elementu blokowego - wówczas tylko poczciwy IE 6 wyświetla je poziomo, a reszta przeglądarek pokazuje je jeden pod drugim - a ja chciałbym, żeby działało właśnie tak jak w niestandardowym IE.
Jako niezbyt zaawansowany webmaster wiem juz, ze nie powinno sie zawierać elementów liniowych w blokowych - a zdaje się, że właśnie taka sytuacja tu występuje. Niestety trafiłem na miejsce gdzie żadne, inne rozwiązanie nie przychodzi mi do głowy. Jakieś sugestie jak to rozwiązać?

podaje poglądowy kod:
  1. <head>
  2. <style type="text/css">
  3. li {
  4. width: 100px;
  5. display:inline;
  6. }
  7. </style>
  8. </head>
  9. <body>
  10. <ul>
  11. <li>
  12. <p>foo</p>
  13. </li>
  14. <li>
  15. <p>bar</p>
  16. </li>
  17. </ul>
  18. </body>
  19. </html>
babejsza
Kod
li {float: left}
li a {display: block}
lewal
Cytat(babejsza @ 4.05.2007, 23:09:21 ) *
Kod
li {float: left}
li a {display: block}

świetnie winksmiley.jpg
przy okazji musiałem doczytać sobie o clear, żeby tło wyglądało jak trzeba, ale teraz mam juz dokładnie taki efekt jakiego potrzebowałem.

dzięki za pomoc

edit:
Obawiam się, że za szybko się ucieszyłem.
Na początku było ok, ale okazało się, że to tylko przypadek - po drobnych zmianach w treści strony powyższe rozwiązanie wygląda mało ciekawie.
Najlepiej pokaże przykład:

http://files.quasigame.pl/sample.html

jak widać element "foo" jest większy od pozostałych zaledwie o jeden wiersz, a przez to koło niego próbują sie zmieścić dwa elementy "bar" i przed trzecim powstaje brzydka przerwa.
gekon
Widać niedokładnie doczytałeś o clear.
  1. li { float: left; clear: left; }
lewal
Cytat(gekon @ 6.05.2007, 16:09:52 ) *
Widać niedokładnie doczytałeś o clear.
  1. li { float: left; clear: left; }

starałem się dość dokładnie, ale możliwe, że coś przeoczyłem.
nie zmienia to faktu, że Twoja porada nie działa tak jakbym tego chciał:
http://files.quasigame.pl/sample1.html
teraz elementy są jeden pod drugim, a to jeszcze gorzej.

jeśli miałeś na myśli umieszczanie "clear:left;" tylko w wybranych elementach "li" to niestety mi to nie pasuje - to kod generowany z szablonów i niektóre z tych elementów mogą być ukryte, a poza tym nie wiem z góry ile się ich zmieści w poziomie - to zależy od rozdzielczości.

zgodnie z Twoim podpisem:
http://quasigame.pl/user/Town/buildings
(jest tam sporo "runtime_error" jesli nie jest sie zalogowanym, ale to nie ma znaczenia - elementy, które mam na myśli to te z nagłówkami "Szałasy", "Chaty", "Magazyny")

a tutaj wersja statyczna, która nieco lepiej pokazuje problem:
http://files.quasigame.pl/buildings.htm
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.