Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS]Wyrównywanie elementów listy
szczabik
post 15.08.2010, 18:22:09
Post #1





Grupa: Zarejestrowani
Postów: 226
Pomógł: 1
Dołączył: 13.05.2008

Ostrzeżenie: (0%)
-----

Witam mam taki kod
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style type='text/css'>
  4. .list, ul li  {
  5. display: block;
  6. list-style: none;
  7. margin: 0;
  8. padding: 0;
  9. }
  10.  
  11. .list li, .list_span {
  12. text-align:right;
  13. }
  14.  
  15. .list li, a {
  16. text-align:left;
  17. }
  18.  
  19.  
  20.  
  21. </style>
  22. </head>
  23. <body>
  24. <ul class='list'>
  25. <li><a href="#">Temat 1</a><span class='list_span'>12</span></li>
  26. <li><a href="#">Temat 2</a><span class='list_span'>12</span></li>
  27. <li><a href="#">Temat 3</a><span class='list_span'>32</span></li>
  28. <li><a href="#">Temat 4</a><span class='list_span'>42</span></li>
  29. <li><a href="#">Temat 5</a><span class='list_span'>12</span></li>
  30. </ul>
  31. </body>
  32. </html>
[HTML] pobierz, plaintext

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.

Ten post edytował szczabik 15.08.2010, 18:23:56
Go to the top of the page
+Quote Post
Damonsson
post 15.08.2010, 19:01:32
Post #2





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
----- 

[CSS] pobierz, plaintext 
  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. }
[CSS] pobierz, plaintext 


[HTML] pobierz, plaintext 
  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>
[HTML] pobierz, plaintext


Ten post edytował Damonsson 15.08.2010, 19:02:54
Go to the top of the page
+Quote Post
arzach
post 15.08.2010, 19:12:07
Post #3





Grupa: Zarejestrowani
Postów: 332
Pomógł: 6
Dołączył: 27.11.2008

Ostrzeżenie: (0%)
-----

To nic nie dało. Tak robiłem już wcześniej teraz wyszło coś takiego
Go to the top of the page
+Quote Post
Mostrom
post 15.08.2010, 19:18:20
Post #4





Grupa: Zarejestrowani
Postów: 83
Pomógł: 3
Dołączył: 17.04.2007

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Pawel_W
post 15.08.2010, 19:18:23
Post #5





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

Ostrzeżenie: (0%)
-----

dla li daj clear:both
Go to the top of the page
+Quote Post
Ramzaa
post 15.08.2010, 19:18:27
Post #6





Grupa: Zarejestrowani
Postów: 207
Pomógł: 17
Dołączył: 4.08.2009

Ostrzeżenie: (0%)
----- 

[CSS] pobierz, plaintext 
  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. }
[CSS] pobierz, plaintext


Tak spróbuj smile.gif
Go to the top of the page
+Quote Post
Mostrom
post 15.08.2010, 19:22:28
Post #7





Grupa: Zarejestrowani
Postów: 83
Pomógł: 3
Dołączył: 17.04.2007

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
Pawel_W
post 15.08.2010, 19:27:16
Post #8





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

Ostrzeżenie: (0%)
-----

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...
Go to the top of the page
+Quote Post
Mostrom
post 15.08.2010, 19:34:18
Post #9





Grupa: Zarejestrowani
Postów: 83
Pomógł: 3
Dołączył: 17.04.2007

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
Damonsson
post 15.08.2010, 19:34:55
Post #10





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

Ooops, tamto tylko sprawdziłem pod IE6 smile.gif

Tamto możesz sobie dać dla IE6, jakbyś w razie dopsaowywał, a tak jest ok:
[CSS] pobierz, plaintext 
  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.  
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
  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>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
arzach
post 15.08.2010, 19:35:02
Post #11





Grupa: Zarejestrowani
Postów: 332
Pomógł: 6
Dołączył: 27.11.2008

Ostrzeżenie: (0%)
-----

Zrobiłem tak i 
[CSS] pobierz, plaintext 
  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. }
[CSS] pobierz, plaintext

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 ?
Go to the top of the page
+Quote Post
Damonsson
post 15.08.2010, 19:38:57
Post #12





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Pawel_W
post 15.08.2010, 19:40:42
Post #13





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

Ostrzeżenie: (0%)
-----

ustaw temu spanowi po prostu
display: block;
a dla a
float: left;
i po problemie...
Go to the top of the page
+Quote Post
arzach
post 15.08.2010, 19:43:45
Post #14





Grupa: Zarejestrowani
Postów: 332
Pomógł: 6
Dołączył: 27.11.2008

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Pawel_W
post 15.08.2010, 19:46:14
Post #15





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

Ostrzeżenie: (0%)
-----

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

Ten post edytował Pawel_W 15.08.2010, 19:47:05
Go to the top of the page
+Quote Post
Damonsson
post 15.08.2010, 19:49:06
Post #16





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

Ty baranie, a może tak przepiszesz dokładnie to co Ci napisałem?

@up
no dokładnie, tam zrobił błąd

Ten post edytował thek 15.08.2010, 21:32:34
Powód edycji: [thek]: I ja się dopisuję... Kolejny obraźliwy tekst i będzie warn...
Go to the top of the page
+Quote Post
darophp
post 15.08.2010, 20:19:53
Post #17





Grupa: Zarejestrowani
Postów: 309
Pomógł: 20
Dołączył: 13.02.2010
Skąd: Kęty

Ostrzeżenie: (0%)
-----

Spokojnie @Damonsson ... już w n-tym wątku się denerwujesz. Pohamuj emocje tongue.gif


--------------------
Fotografia, projektowanie stron WWW | web-coding.pl - HTML 5 i CSS 3 - już w krótce ;)
Go to the top of the page
+Quote Post
arzach
post 15.08.2010, 20:20:14
Post #18





Grupa: Zarejestrowani
Postów: 332
Pomógł: 6
Dołączył: 27.11.2008

Ostrzeżenie: (0%)
-----

Sorki jednak działa złe skopiowałem, bo robiłem wcześniej ze span.

Co do span to można zrobić tak
[CSS] pobierz, plaintext 
  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>
[CSS] pobierz, plaintext

i tez działa.
Go to the top of the page
+Quote Post
Pawel_W
post 15.08.2010, 21:12:11
Post #19





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

Ostrzeżenie: (0%)
-----

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...
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 26.04.2024 - 08:19
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn