Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Wyrównywanie elementów listy
Forum PHP.pl > Forum > Przedszkole
szczabik
Witam mam taki kod
  1. <style type='text/css'>
  2. .list, ul li {
  3. display: block;
  4. list-style: none;
  5. margin: 0;
  6. padding: 0;
  7. }
  8.  
  9. .list li, .list_span {
  10. text-align:right;
  11. }
  12.  
  13. .list li, a {
  14. text-align:left;
  15. }
  16.  
  17.  
  18.  
  19. </head>
  20. <ul class='list'>
  21. <li><a href="#">Temat 1</a><span class='list_span'>12</span></li>
  22. <li><a href="#">Temat 2</a><span class='list_span'>12</span></li>
  23. <li><a href="#">Temat 3</a><span class='list_span'>32</span></li>
  24. <li><a href="#">Temat 4</a><span class='list_span'>42</span></li>
  25. <li><a href="#">Temat 5</a><span class='list_span'>12</span></li>
  26. </ul>
  27. </body>
  28. </html>

I chciał bym zrobić by linki były wyrównane do lewej strony a tekst w <span> do prawej próbowałem z float text-align ale nie przyniosło to oczekiwanego efektu proszę o pomoc.
Damonsson
  1. .list, ul li {
  2. display: block;
  3. list-style: none;
  4. margin: 0;
  5. padding: 0;
  6. }
  7.  
  8. .list span {
  9. float:right;
  10. }
  11.  
  12. .list a {
  13. float:left;
  14. }


  1. <ul class='list'>
  2. <li><a href="#">Temat 1</a><span>12</span></li>
  3. <li><a href="#">Temat 2</a><span>12</span></li>
  4. <li><a href="#">Temat 3</a><span>32</span></li>
  5. <li><a href="#">Temat 4</a><span>42</span></li>
  6. <li><a href="#">Temat 5</a><span>12</span></li>
  7. </ul>
arzach
To nic nie dało. Tak robiłem już wcześniej teraz wyszło coś takiego
Mostrom
1 metoda: zrób obok drugą listę, w której będą się znajdować elementy z prawej storny
2 metoda: umieść dane w tabeli

Tak w ogóle to nie wierzę, że nie działa biggrin.gif
Pawel_W
dla li daj clear:both
Ramzaa
  1. .list, ul li {
  2. display: block;
  3. list-style: none;
  4. margin: 0;
  5. padding: 0;
  6. }
  7.  
  8. .list span {
  9. display: inline;
  10. float:right;
  11. }
  12.  
  13. .list a {
  14. float:left;
  15. }


Tak spróbuj smile.gif
Mostrom
Jeszcze jedno: ze span są same problemy. Spróbuj to samo co ze spanem zrobić np z divem. Spana nie polecam nikomu, nie działają takie rzeczy jak text-align.
Pawel_W
Cytat(Mostrom @ 15.08.2010, 20:22:28 ) *
Jeszcze jedno: ze span są same problemy. Spróbuj to samo co ze spanem zrobić np z divem. Spana nie polecam nikomu, nie działają takie rzeczy jak text-align.

no bo span to nie element blokowy, ehh...
Mostrom
to w takim razie po co wyrównanie tekstu w liście bez diva? musi się znaleśc taki element, żeby można było coś robić wewnątrz tego li.
Damonsson
Ooops, tamto tylko sprawdziłem pod IE6 smile.gif

Tamto możesz sobie dać dla IE6, jakbyś w razie dopsaowywał, a tak jest ok:
  1. ul, li {
  2. display: block;
  3. list-style: none;
  4. margin: 0;
  5. padding: 0;
  6.  
  7. }
  8.  
  9. p {
  10. text-align:right;
  11. margin: 0;
  12. padding: 0;
  13. }
  14.  
  15. a {
  16. text-align:left;
  17. float: left;
  18. margin: 0;
  19. padding: 0;
  20. }
  21.  

  1. <ul>
  2. <li><a href="#">Temat 1</a><p>12</p></li>
  3. <li><a href="#">Temat 2</a><p>12</p></li>
  4. <li><a href="#">Temat 3</a><p>32</p></li>
  5. <li><a href="#">Temat 4</a><p>42</p></li>
  6. <li><a href="#">Temat 5</a><p>12</p></li>
  7. </ul>
arzach
Zrobiłem tak i
  1. .list, ul li {
  2. display: block;
  3. list-style: none;
  4. margin: 0;
  5. padding: 0;
  6. }
  7.  
  8. .list li {
  9. clear:both;
  10. }
  11.  
  12. .list a {
  13. float:left;
  14. }
  15.  
  16. .list span {
  17. clear:right;
  18. }

Wszystko jest teraz z lewej strony.


Kod, który podał Ramzaa nie działa.


Cytat(Mostrom @ 15.08.2010, 20:18:20 ) *
1 metoda: zrób obok drugą listę, w której będą się znajdować elementy z prawej storny
2 metoda: umieść dane w tabeli

Tak w ogóle to nie wierzę, że nie działa biggrin.gif


Robiłem to wcześniej w tabelkach, ale tabele są przestarzałe i postanowiłem to zrobić w formie listy.

Czyli jednym rozwiązaniem jest zmiana span na div ?


Damonsson
Cytat(arzach @ 15.08.2010, 20:35:02 ) *
Kod, który podał Ramzaa nie działa.


Robiłem to wcześniej w tabelkach, ale tabele są przestarzałe i postanowiłem to zrobić w formie listy.

Czyli jednym rozwiązaniem jest zmiana span na div ?


1. Bo nie ma prawa działać winksmiley.jpg
2. Nie, rozwiązanie masz jeden post nad Twoim smile.gif
Pawel_W
ustaw temu spanowi po prostu
display: block;
a dla a
float: left;
i po problemie...
arzach
Cytat(Damonsson @ 15.08.2010, 20:38:57 ) *
1. Bo nie ma prawa działać winksmiley.jpg
2. Nie, rozwiązanie masz jeden post nad Twoim smile.gif



No to dziwne ale nie działa zobacz sam http://www.fusions.cba.pl/news.php
Mam IE 8

Pawel_W
Cytat(arzach @ 15.08.2010, 20:43:45 ) *
No to dziwne ale nie działa zobacz sam http://www.fusions.cba.pl/news.php
Mam IE 8

może dlatego, że w kodzie masz spany a zdefiniowałeś style dla paragrafów? blinksmiley.gif

na 100% działa, sprawdzałem pod Chromem
Damonsson
Ty baranie, a może tak przepiszesz dokładnie to co Ci napisałem?

@up
no dokładnie, tam zrobił błąd
darophp
Spokojnie @Damonsson ... już w n-tym wątku się denerwujesz. Pohamuj emocje tongue.gif
arzach
Sorki jednak działa złe skopiowałem, bo robiłem wcześniej ze span.

Co do span to można zrobić tak
  1. <style type='text/css'>
  2. .list, ul, li {
  3. display: block;
  4. list-style: none;
  5. margin: 0;
  6. padding: 0;
  7. clear:both;
  8. }
  9.  
  10. .list span {
  11. float: right;
  12. }
  13.  
  14. .list a {
  15. float: left;
  16. }
  17. </style>
  18.  
  19. <ul class="list">
  20. <li><a href="#">Temat 1</a><span>12</span></li>
  21. <li><a href="#">Temat 2</a><span>12</span></li>
  22. <li><a href="#">Temat 3</a><span>32</span></li>
  23. <li><a href="#">Temat 4</a><span>42</span></li>
  24. <li><a href="#">Temat 5</a><span>12</span></li>
  25. </ul>

i tez działa.
Pawel_W
tylko po co tyle postów? o dodaniu clear: both do li mówiłem Ci już dawno temu... ehh, naprawdę, wg mnie powinni wprowadzić odpłatne pomaganie, bo inaczej widać jakie jest zainteresowanie...
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.