Mit unten mit position relative?

Ich versuche zu bekommen eine Reihe von <a> tags erscheinen an der Basis der übergeordneten <li>.

Das problem ist zweifach. Wenn ich position: relative, bottom: 0; hat keine Wirkung. Wenn ich position: absolute, die <li>'s überlappenden breiten.

Ich den beheben kann das erste problem durch die Verwendung der top Stil, aber dies ist nicht ideal, denn der text Größe ist unbekannt und die top-element Messen Sie von der Oberseite der beiden Elemente (also die base des Elements würde nicht auf den sockel, es sei denn, ich wusste, dass die schriftart, - Größe).

Kann ich beheben, das zweite mit den vorgegebenen breiten, aber dies wird fügen Sie unerwünschte Leerzeichen auf Elemente mit kürzeren Titeln.

Hier ein JSFiddle des Problems.

Sie wollen nicht fügen Sie ein margin/padding-top, li/a-Elemente?
Gleiche problem mit unterschiedlichen Schriftgrößen.

InformationsquelleAutor Mild Fuzz | 2011-07-21

  1. 4

    Versuchen dieses bisschen CSS:

    #main-menu li a{
    display: table-cell; 
    position: relative;
    vertical-align: bottom;
    height: 111px;
}

    jsFiddle der Arbeitsstil

    Soweit meine Forschung sehen können, das einzige browser-Kompatibilität Problem mit diesem ist, dass aufgebracht werden muss und inline-element für den IE7, die in diesem Fall in Ordnung ist. Wer weiß, irgendeinen Grund würde scheitern?

    InformationsquelleAutor Joe

  2. 0

    Fügen Sie eine line-height-Wert auf den "#main-menu li a" Stil und position entsprechend 200px funktionieren sollte.

    Dies ist unvollkommen, denn es hängt auch von font-size.
    Sie haben vollkommen Recht, es traf mich nach einer Weile.

    InformationsquelleAutor Andres Ilich

Schreibe einen Kommentar