Hier findest Du ein Script, mit dessen Hilfe Du Listen als Tabelle darstellen kannst. Es wird Javascript genutzt, um eine gleiche Höhe für jede Zeile zu garantieren. Das Script wird aber nur nach dem Laden aufgerufen. Sollte zwischendurch die Breite des Browserfensters geändert werden, so wird es nicht noch einmal aufgerufen. Mehr findest Du im Quelltext dieser Seite und in der Javascript-Datei.
Jede ul-Liste muss als Klassenname "ad_list_table_javascript_xx" (ohne Anführungszeichen) enthalten. Nur diese Listen werden vom Script bearbeitet. xx steht für den margin-Wert in Pixel, den Du jedem li-Element gibst. Dies solltets Du tun, damit die Listenelemente nicht aneinander kleben. Gibst Du der ul-Liste den Klassennamen "ad_list_table_javascript_xx_yy" (ohne Anführungszeichen), so steht yy für die Rahmenbreite des ersten Kindelementes des li-Elementes. Jedes li-Element sollte nur ein einziges Kindelement haben. Dieses widerum kann mehrere haben.
Beispielsweise (die Stileigenschaften sollten in einer extra css-Datei stehen):
<ul class="ad_list_table_javascript_10_2" style="list-style: none; text-align: center;">
<li style="margin: 10px;" >
<a href="#" style="border: 2px solid red; width: 100%; height: 100%;">
<span class="padding">
Andere Elemente
</span>
</a>
</li>
</ul>
Du möchtest, dass die Liste über die gesamte Breite geht? (Durch die margin-Werte in den li-Elementen hast Du ein Offset von 10px). Die Lösung: Gebe zusätzlich die ul-Klasse "ad_list_table_javascript_full_width" an. Folgende Stileigenschaften musst Du dann zusätzlich der ul geben: margin-left: -(margin-Wert + 2*borderWidth vom Kindelement) in Pixeln und margin-right: -(margin-Wert) in Pixeln. Beispielsweise: style="margin-left: -14px; margin-right: -10px".
Das Ergebnis:
Alle li-Elemente sollten nicht auf einer neuen Zeile beginnen, da die Browser sonst zwischen den einzelnen li-Elementen einen Platz schaffen, der für die Darstellung nicht gut ist. Neue li-Elemente sollten also auf der gleichen Zeile beginnen, wo das vorherige endet (z.B. </li><li>). Das letzte li-Element sollte auf einer Zeile so abschließen: </li></ul>