CSS li-Elemente sitzen nebeneinander nicht auf derselben Höhe

[Snooty]

Hio,

ich habe hier zwei li-Elemente welche mit display:inline-block formatiert sind.

Eigentlich saßen die Elemente immer vertikal zentriert nebeneinander; nun habe ich aber festgestellt, dass das rechte Element etwas nach unten verrutscht ist (ich habe lange nicht an der Seite gearbeitet, daher weiß ich nicht, was ich zuletzt daran geändert hätte ...):




Sieht jemand, was da hakt? Wie gesagt - es war schon mal beides auf derselben Höhe
In der mobilen Ansicht sitzen die beiden Elemente am Ende der Seite, da sieht es normal aus:

 

[Mihawk90]

Dein Problem ist der Text welcher im PDF link steht:

<a href="/pdf/1/" title="Download als PDF">Download als PDF</a>

Wenn du den entfernst und nur den Title lässt funktioniert's wie vorher und das Offset ist weg.

 

[Snooty]

Ah ja, danke. Das hab ich dann wohl später für die mobile Ansicht eingefügt.

edit: ach ne, wie ich gerade sehe, hatte ich den Text beim ersten Element fälschlicherweise mit kurzen PHP-Tags eingefügt, was auf dem neuem Webspace nicht aktiviert ist.

 

[Mihawk90]

Ja PHP hat gefühlt zuviele Orte wo die Konfiguration liegen kann

Als Alternative würde ich meinen schließ den Text in ein <span> wenn du ihn wirklich brauchst (wobei die Icons selbsterklärend sein sollten und der title ist ja sonst auch noch da), und mach nen selector um sie auf dem Desktop auszublenden.

li.whatever > a > span {display:none}

So hast dus auf beiden Platformen. Alternativ geht's auch in einer content property auf dem Link.

 

[Snooty]

Gute Idee, danke