ul > li > a nebeneinander über 100%

campari

Erfahrenes Mitglied
Es soll ein Menü mit Links nebeneinander dargestellt werden, das die ganze Breite des Elternelements nutzt:

HTML:
<div
  <ul>
    <li>
      <a>Home</a>
    </li>
    <li>
      <a>Sehr sehr langer Link</a>
    </li>
    <li>
      <a>Short</a>
    </li>
  </ul>
</div>

CSS:
div {
    display:table;width:100%;
}
ul {
    display:table-row;
    width:100%;
}
ul {
    display:table-cell;
    text-align:center;
}
a {
    display:block;
}

Dabei haben die Links ein unterschiedliches "padding": je länger der Textlink, desto proportional grösser ist der Innenabstand:

http://jsfiddle.net/PD3CS/

GIbts ne andere Technik, ohne dass explizit mit width oder padding für die Link-Elemente gearbeitet werden muss, denn der Linktext ist dynamisch?
 
Zuletzt bearbeitet:
Zurück