Außen bündige Verteilung von Listeneinträgen
Bernd Sangmeister
- css
Heyho,
ich habe folgende Aufgabe: Eine (unsortierte) Liste als Navigation soll so ausgerichtet werden, dass die Einträge gleichmäßig verteilt sind. Dabei sollen die Worte an den Außenkanten bündig sein, damit sie optisch die Breite eines darunter liegenden Bildes erreichen. Also in etwa so:
Listeneintrag1 Listeneintrag2 Listeneintrag3 Listeneintrag4
+----------------------------------------------------------------------+
| |
| |
| Bild |
| |
| |
+----------------------------------------------------------------------+
Wichtig:
1. Valides, standardkonformes XHTML/CSS
2. Die Worte außen sollen bündig sein... d.h. das <ul> hat eine feste Breite (?)
3. Die mittleren Einträge sollen gleichmäßig verteilt sein.
Hat jemand eine Idee oder einen Ansatz?
Vielen vielen Dank!
Hat jemand eine Idee oder einen Ansatz?
table, table-row, table-cell, :first-child, :last-child
Anm.: bis auf :last-child ist es bereits auch mit CSS 2.1 möglich.
@@suit:
nuqneH
Bist du _sicher_? Ich sehe nicht, wei’s damit gehen sollte.
Qapla'
Bist du _sicher_? Ich sehe nicht, wei’s damit gehen sollte.
Eine pseudo-Tabelle zum gleichmäßigen Aufteilen sowie ein text-align: left bzw. right für das erste bzw. letzte Element.
@@suit:
nuqneH
Bist du _sicher_? Ich sehe nicht, wei’s damit gehen sollte.
Eine pseudo-Tabelle zum gleichmäßigen Aufteilen sowie ein text-align: left bzw. right für das erste bzw. letzte Element.
Dann ergäbe doch wohl aber einen anderen Abstand zwischen erstem und zweiten bzw. vorletztem und letztem Item als zwischen den anderen.
Qapla'
Dann ergäbe doch wohl aber einen anderen Abstand zwischen erstem und zweiten bzw. vorletztem und letztem Item als zwischen den anderen.
Stimmt, in der Tat - mein Denkfehler.
@@Bernd Sangmeister:
nuqneH
Hat jemand eine Idee oder einen Ansatz?
http://forum.de.selfhtml.org/archiv/2006/2/t123997/#m798667 (2) in Kombination mit http://forum.de.selfhtml.org/archiv/2008/11/t179003/#m1180868
Wenn die Einträge auch aus mehreren Wörtern bestehen können (zwischen denen dann ein normaler Leerzeichenabstand sein soll), könnte 'li { display: inline-block }
' helfen.
Qapla'
@@Bernd Sangmeister:
nuqneH
Hat jemand eine Idee oder einen Ansatz?
http://forum.de.selfhtml.org/archiv/2006/2/t123997/#m798667 (2) in Kombination mit http://forum.de.selfhtml.org/archiv/2008/11/t179003/#m1180868
Wenn die Einträge auch aus mehreren Wörtern bestehen können (zwischen denen dann ein normaler Leerzeichenabstand sein soll), könnte '
li { display: inline-block }
' helfen.Qapla'
Danke für Deine Antwort! Wenn ich Dich aber richtig verstehe, würde das ja eher folgende Ausgabe ergeben:
Listeneintrag1 Listeneintrag2 Listeneintrag3 Listeneintrag4
+----------------------------------------------------------------------+
| |
| |
| Bild |
| |
| |
+----------------------------------------------------------------------+
Ich hätte also vor dem ersten und nach dem letzten Eintrag einen Abstand zu den Bild-Grenzen. Und das will ich ja gerade vermeiden.
Oder habe ich es falsch verstanden?
@@Bernd Sangmeister:
nuqneH
Ich hätte also vor dem ersten und nach dem letzten Eintrag einen Abstand zu den Bild-Grenzen.
Nein. Wo sollte der herkommen?
Qapla'
PS: Zitiere bitte sinnvoll, nicht alles.
@@Bernd Sangmeister:
nuqneH
Markup:
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">dolor sit amet</a></li>
<li><a href="#">consectetuer adipiscing</a></li>
<li><a href="#">elit</a></li>
</ul>
Stylesheet:
ul
{
list-style: none;
margin: 0;
padding: 0;
text-align: justify;
text-align-last: justify;
background: yellow;
}
li
{
display: inline;
margin: 0 0 0 2em;
padding: 0;
}
li:first-child
{
margin: 0;
}
li:last-child::after
{
content: "\A0";
display: block;
height: 0;
overflow: hidden;
}
a
{
display: inline-block;
}
Funktioniert in Firefox 3.5 und IE 8.
Webkits können 'display' noch nicht auf generierten Inhalt anwenden. Opera 9 und 10 tun dies, dennoch kein Blocksatz der vorigen Zeile.
Opera 9 (nicht 10) macht auch einen Umbruch bei 'content: "\A \A0"' ohne 'display: block', aber dennoch keinen Blocksatz.
Qapla'
Klasse, das funktioniert! Vielen Dank!!!