Umkehren der Span-Reihenfolge mit Float:right

Im bereitgestellten HTML werden Spans mit der Klasse „button“ mit „float: right“ formatiert , wodurch sie in umgekehrter Reihenfolge wie die HTML-Struktur angezeigt werden. Kann das CSS geändert werden, um die HTML-Reihenfolge beizubehalten?

Um dieses Problem zu beheben, gibt es zwei allgemeine Lösungen, die die Positionierung mithilfe von CSS manipulieren:

Option 1: HTML-Reihenfolge umkehren

Anstatt die Span-Elemente direkt zu schweben, wickeln Sie sie in ein enthaltendes Element ein und lassen Sie es nach rechts schweben. Zum Beispiel:

    Settings
    Export
    Import


#buttons {
    float: right;
}

In diesem Fall umfasst das Div „buttons“ mit der Eigenschaft „float: right“ die Schaltflächenbereiche, sodass sie in der richtigen Reihenfolge angezeigt werden können.

Option 2: HTML-Reihenfolge beibehalten

Wenn die Beibehaltung der aktuellen HTML-Reihenfolge von entscheidender Bedeutung ist, fügen Sie CSS-Regeln hinzu, um die Reihenfolge der schwebenden Bereiche explizit anzugeben. Verwenden Sie die Eigenschaft „clear“, um den Fluss der schwebenden Elemente zu unterbrechen und zu erzwingen, dass sie in der ursprünglichen HTML-Reihenfolge angezeigt werden:

span.button {
    float: right;
    clear: right;
}

Die Eigenschaft „clear: right“ stellt sicher, dass alle folgenden Elemente unterhalb der schwebenden Bereiche beginnen, wodurch die HTML-Reihenfolge effektiv erhalten bleibt und gleichzeitig die rechte Ausrichtung berücksichtigt wird.