[css][xhtml] poziome menu rozciągnięte między dwoma krawędziami

[Flake]

Witam,
potrzebuję zrobić poziome menu. Menu będzie zawierało zmienną ilość linków. Pierwszy link menu musi być przyklejony do lewej strony DIVa który będzie przechowywał menu zaś prawy link do prawej strony. Chcę, żeby odległości między linkami były automatycznie zmieniane po dodaniu nowego linka. Próbowałem to zrobić ale póki co udaje mi się uzyskać 'statyczne' menu - czyli odległości między elementami menu ustalone na sztywno - co po dodaniu nowego linka rozwala całe menu. Czy jest jakiś sprytny sposób na zrobienie tego aby odległości ustalały się automatycznie?

Kod:

    <div id="menu">
        <ul>
            <li><a href="">link 1</a></li>
            <li><a href="">link 2</a></li>
            <li><a href="">link 3</a></li>
            <li><a href="">link 4</a></li>
        </ul>
    </div>

link 1 powinien mieć margin-left: 0 a link 4 margin-right: 0;

jakieś porady?

[beny]

żeby wyrównać szerokości pomiędzy komórkami i pod warunkiem, że możesz olać IE6 i IE7, to poszukaj właściwości display: table;

dla pierwszego elementu <li> daj klasę np. first, dla ostatniego last i ostyluj to cssem

jeśli to ma być cross-browser... zostaje Ci albo tabela w htmlu albo przeszukanie google

[Kartofelek]

Albo jquery. 1 -2 linijki kodu

[beny]

@Kartofelek
do liczenia szerokości każdego elementu, czy oznaczania pierwszego i ostatniego <li> ?

[Kartofelek]

Liczenia. Albo oznaczenia. ;] Jak ma byc dynamicznie 100%, to wtedy same css coś mi się wydaje że nie zadziałają.
Zresztą to i tak nie zawsze możliwe bo:

link1 | link_2 | super_długi_link_który_jest_najdlozszym_linkkiem_w_historii_internetu_3 | tyci_link4

Tak więc albo tabela, albo display-table (zawodne), albo jquery.

Albo zmienić podejście do całej sprawy

[Flake]

Jquery odpada - chcę to zrobić na czystym html, css - javascript będę dodawał poźniej. Chcę żeby było też zgodnie ze standardami oraz żeby kod był semantyczny. Dlatego tabelka też odpada. Nie temu służy

Myślałem, że robi się to za pomocą jakiejś konfiguracji elementów display, position i text-position w odniesieniu do diva zawierającego i poszczególnych <li>

Widocznie będę musiał poszukać głębiej

[Kartofelek]

"Dlatego tabelka też odpada. Nie temu służy"
???????????
Czekaj dodam jeszcze kilka
?????????

Nikt nie mówi tutaj o tabelce. Mówimy o display:table
Jedno z drugim nie ma nic wspólnego

Co mogę powiedzieć. Życzę powodzenia w czystym CSS który zadziała na większości przeglądarek (nawet nie mówię tutaj o IE6). Jak ci się uda koniecznie napisz rozwiązanie, bo sam jestem ciekaw.

[Flake]

"Tak więc albo tabela, albo display-table (zawodne), albo jquery."

Jak coś znajdę to dam znać