Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z float - nie wypełnia całej przestrzeni elementu
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
allexxiaa
Witam wszystkich,

  1. div id="wrapper">
  2. <nav>
  3. <ul>
  4. <li><a href="#">Strona główna |</a></li>
  5. <li><a href="#">O mnie |</a></li>
  6. <li><a href="#">Kontakt</a></li>
  7. </ul>
  8. </nav>
  9. </div>


  1. #wrapper {
  2. margin: 0 auto;
  3. width: 800px;
  4. }
  5.  
  6. nav {
  7. float: right;
  8. background: #333;
  9.  
  10. }
  11.  
  12. nav ul {
  13. float: left;
  14. width: 100%;
  15. padding: 10px 0 0 10px;
  16. list-style: none;
  17. }
  18.  
  19. nav li {
  20. float: left;
  21. margin-right: 1px;
  22. }


Wynik kodu: http://img832.imageshack.us/i/navf.jpg/

Jak wypełnić całą przestrzeń elementu nav z linkami po prawej stronie?

Po dodaniu width i podaniu wartości do nav jest wypełniona cała przestrzeń nav, ale linki są po lewej stronie - jak zrobić, żeby było po prawej stronie?
wookieb
wywal float:left z LI
Dopisz do LI display:block
allexxiaa
  1. #wrapper {
  2. margin: 0 auto;
  3. width: 800px;
  4. }
  5.  
  6. nav {
  7. float: right;
  8. background: #333;
  9. }
  10.  
  11. nav ul {
  12. float: left;
  13. width: 100%;
  14. padding: 10px 0 0 10px;
  15. list-style: none;
  16. }
  17.  
  18. nav li {
  19. display: block;
  20. margin-right: 1px;
  21. }


Niestety nie wyszło. Wynik: http://img853.imageshack.us/i/nav.jpg/
Chcę, żeby element nav wypełniał całą przestrzeń ciemnym tłem, a linki były poziome (w jednym wierszu).
wookieb
Wstaw swój kod tutaj http://jsfiddle.net/
Pokaż efekt jaki chcesz osiągnąć.
To co jest teraz wynika z marginesów narzuconych przez listy UL
Poczytaj troszkę kursów o CSS oraz o "reset css"
allexxiaa
  1. <div id="wrapper">
  2. <nav>
  3. <ul>
  4. <li><a href="#">Strona główna |</a></li>
  5. <li><a href="#">O mnie |</a></li>
  6. <li><a href="#">Kontakt</a></li>
  7. </ul>
  8. </nav>
  9. </div>


  1. #wrapper {
  2. margin: 0 auto;
  3. width: 800px;
  4. }
  5.  
  6. nav ul {
  7. float: left;
  8. width: 100%;
  9. margin: 0;
  10. padding: 10px 0 0 46px;
  11. list-style: none;
  12. background: #333;
  13. }
  14.  
  15. nav li {
  16. float: left;
  17. margin: 0 1px 0 0;
  18. padding: 0;
  19. }


Wynik: http://img3.imageshack.us/i/navd.jpg/

Wygląda pięknie, ale jak zrobić, żeby linki były po prawej stronie? Nie wyszło mi jak stosowałam float: right
krzywy36
usuń z nav ul width: 100% i daj float: right.
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.