Cześć.

Chciałbym się dowiedzieć w jaki sposób projektujecie menu, którego pozycje muszą być rozciągnięte według danego pojemnika. Proszę rzucić okiem na kod niżej:

[HTML] pobierz, plaintext 
<div id="container"> 
   <div id="menu"> 
       <ul> 
              <li>home</li> 
              <li>forum</li> 
              <li>kontakt</li> 
              <li>oferta</li> 
       </ul> 
   </div> 
</div> 
[HTML] pobierz, plaintext 

#container - załóżmy, że ma 900x; i teraz dla przykładu mamy 4 pozycje w nawigacji, które musimy rozciągnąć na długość 900px.
(* jeśli ktoś potrzebuje wizualizacji to proszę kliknąć TUTAJ *)
(fioletowy prostokąt pokazuje, że menu nie jest rozciągnięte na pełną szerokość)

Ogólnie obecnie kombinuje za pomocą paddingu (np. dla li { padding-left: 40px; padding-right: 40px; } - i zawsze dla czterech pozycji jestem w stanie wyrównać szerokość... Tylko to rozwiązanie wydaje mi się strasznie amatorskie, stąd ten temat. Poza tym jeśli bym chciał dodać nową pozycje do menu (piątą pozycje) to musiałbym edytować CSS i ten "40px" padding redukować. Rozwiązanie te nie jest praktycznie.

Z rad, które dostałem:
- menu na tabelkach i pozycje w menu jako komórki td,
- flex-box (niektóre przeglądarki źle sobie z nim radzą),
- algorytmy javascriptowe

Czy macie jakieś rady? jak za pomocą czystego CSSa uzyskać taki efekt?

Moim zdaniem takie cos mogloby dac taki efekt:

[HTML] pobierz, plaintext 
.menuu {
    margin: 0px;
    width: 25%;
    float: left;
    padding-left: 40px;
    padding-right: 40px;
}
[HTML] pobierz, plaintext 

A w htmlu dac:

[HTML] pobierz, plaintext 
<div id="container"> 
   <div id="menu"> 
       <ul> 
              <div class="menuu">home</div> 
              <div class="menuu">forum</div> 
              <div class="menuu">kontakt</div> 
              <div class="menuu">oferta</div> 
       </ul> 
   </div> 
</div> 
[HTML] pobierz, plaintext 

Choć nie jestem pewien czy będzie działać...

Możesz dać #menu li {width: 25%} i jakiś text-align: center minus padding jeśli są potrzebne.
Zazwyczaj nie ma też potrzeby pakować dodatkowy div#menu wokół ul.