Autor |
Nachricht |
PinkePunk
Threadersteller
Dabei seit: 14.07.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 11.07.2014 00:43
Titel html Navigationsleiste |
|
|
Hallo,
ich möchte auf einer horizontalen Navigationsleiste 7 Menüpunkte nacheinander aufsetzen, wobei die Breite der ersten 6 Menüpunkte sich nach der Breite des Menüwortes richten soll, die Breite des letzten Menüpunktes jedoch den verbleibenen Raum einnehmen soll. Ich habe mich damit beholfen, der Breite des letzten Menüpunktes einen festen Wert zu geben, mit dem Ergebnis, dass dieses die Browser unterschiedlich darstellen (wird durch einen hover-Effekt sichtbar!) Gibt es eine bessere Lösung?
|
|
|
|
|
tschuingum
Dabei seit: 17.06.2009
Ort: Karlsruhe
Alter: -
Geschlecht: -
|
Verfasst Fr 11.07.2014 09:15
Titel
|
|
|
Würden mir zwei Varianten einfallen - wenn wir mal davon ausgehen, dass das Menü eine unsortierte Liste ist, könnte es so aussehen
Variante 1: display: table-cell
Code: | ul {
display: table;
width: 100%;
}
li {
display: table-cell;
width: 5em;
}
li:last-child {
width: auto;
}
|
Variante 2: Flexbox
Code: | ul {
display: flex;
}
li:last-child {
flex-grow: 1;
}
|
Zuletzt bearbeitet von tschuingum am Fr 11.07.2014 09:17, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
PinkePunk
Threadersteller
Dabei seit: 14.07.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 12.07.2014 12:05
Titel
|
|
|
Die erste Variante passt. Das Flexboxmodell kenne ich noch nicht, werde mich aber hinein arbeiten.
Besten Dank!
|
|
|
|
|
|
|
|
Ähnliche Themen |
HTML/CSS Navigationsleiste
Navigationsleiste
navigationsleiste php
Navigationsleiste ausblenden
Navigationsleiste zentrieren
Navigationsleiste-Ausrichtung
|
|