Frage von Evergreen89, 23

Probleme mit CSS-Rating bei float:right - Lösung?

Ich möchte gerne ein Bewertungstool machen, welches ganz ohne JS auskommt. Habe dazu bereits ein paar Scripte gefunden, die ich nun anpassen möchte bzw. schon habe.

Statt Bilder nutze ich die Material-Icons von Google, welches als Schriftart genutzt wird.

Mein Problem ist nun, das sich bei mir "unsichtbare" Elemente befinden, die falsch positioniert sind. Laut Firebug, Chrome etc. sind die Elemente (label) aber richtig positioniert.

Der Code: http://codepen.io/anon/pen/yYqvgy

Wenn ich "label.star" auf float: left umstelle, ist diese verschiebung nicht vorhanden. Bei float: right sind die Elemente rechts neben der Sternen.

Woran liegt das?

Antwort
von userfromberlin, 18

Das Tool funktioniert bei mir einwandfrei. Beim Anklicken  der Sterne wird nichts verschoben. Was genau soll denn falsch sein?!

Kommentar von Evergreen89 ,

Welchen Browser nutzt du?

Um den 5. Stern auszuwählen (orangene Stern), muss ich auf den roten Punkt ca. 120 Pixel recht daneben ins leere klicken. Das ist aber nur bei "Float: right; der Fall. Ohne floating funktioniert das zwar wunderbar, aber dann stimmt die Reihenfolge nicht mehr.

http://www.pic-upload.de/view-28754492/stern.jpg.html
Kommentar von userfromberlin ,

Stimmt, ich habe das nur nicht gemerkt. Doch ich habe  nun einen Hack gefunden: mach das float weg und spiegele das div (transform: scaleX(-1)); Hier das Resultat: http://codepen.io/anon/pen/XmBqjG

Kommentar von Evergreen89 ,

Vielen Dank, das war die "Lösung". Habe auch schon mit transform gespielt, allerdings nicht mit scaleX, sondern rotate ...

Antwort
von yerooke, 23

Warum benötigst du überhaupt ein float?

Kommentar von Evergreen89 ,

Da sonst die Reihenfolge der aktiven Checkboxen nicht stimmt. Diese sollen von links nach rechts verlaufen, was ja nur mit float: right; geht, oder nicht?

Ich habe zumindest keine andere Möglichkeit gefunden...

Kommentar von MonkeyKing ,

display: inline-block; ?

Kommentar von yerooke ,

jupp...hätte ich auch gesagt, anstatt float lieber die checkboxen auf inline-block setzen

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten