Znajdziesz wiele samouczków na temat pasków menu w HTML, ale w tym konkretnym (choć ogólnym przypadku IMHO) nie znalazłem żadnego przyzwoitego rozwiązania:
# THE MENU ITEMS SHOULD BE JUSTIFIED JUST AS PLAIN TEXT WOULD BE #
# ^ ^ #
- Istnieje zmienna liczba pozycji menu zawierających tylko tekst, a układ strony jest płynny.
- Pierwsza pozycja menu powinna być wyrównana do lewej, a ostatnia pozycja menu powinna być wyrównana do prawej.
- Pozostałe pozycje należy optymalnie rozłożyć na pasku menu.
- Liczba jest różna, więc nie ma szansy na wstępne obliczenie optymalnych szerokości.
Zwróć uwagę, że TABELA również tutaj nie będzie działać:
- Jeśli wyśrodkujesz wszystkie niszczyciele czołgów, pierwszy i ostatni przedmiot nie będą poprawnie ustawione.
- Jeśli wyrównasz do lewej i do prawej pierwszy resp. ostatnie elementy odstępy będą nieoptymalne.
Czy to nie dziwne, że nie ma oczywistego sposobu zaimplementowania tego w czysty sposób za pomocą HTML i CSS?
span
zamiasthr
! To naprawdę nie działa, HR zajmuje widoczną przestrzeń - użyj,#menu { border: solid 1px green; }
aby potwierdzić. Ponadtodisplay: inline-block;
nie działa w IE (... 7? CompatibilityView?) Dla elementów, które nie są naturalnie elementami wbudowanymi. HR jest elementem blokowym, więc domyślam się, że inline-block nie działa dla HR w IE. W każdym razie, rozpiętość.