Warum kehrt „float: right' die Reihenfolge der Spans in HTML um?

Float: Rechte Umkehrreihenfolge von Spans

Angesichts des HTML-Markups:

<code class="html"><div>
    <span class="label"><a href="/index/1">Bookmix Offline</a></span>
    <span class="button"><a href="/settings/">Settings</a></span>
    <span class="button"><a href="/export_all/">Export</a></span>
    <span class="button"><a href="/import/">Import</a></span>
</div></code>

Anwenden des CSS:

<code class="css">span.button {
    float: right;
}

span.label {
    margin-left: 30px;
}</code>

führt zu einer unerwarteten Anzeigereihenfolge im Browser, wobei die Bereiche als „Import-Export-Einstellungen“ anstelle der Reihenfolge in der HTML-Quelle angezeigt werden.

Lösung

Um dieses Problem zu beheben, ohne den HTML-Code zu ändern, kann das CSS angepasst werden. Ein Ansatz besteht darin, die Reihenfolge der rechten schwebenden Elemente umzukehren:

<code class="css">span.button:nth-child(1) {
    float: right;
}

span.button:nth-child(2) {
    float: right;
    margin-right: 5px;
}

span.button:nth-child(3) {
    float: right;
    margin-right: 10px;
}

span.label {
    margin-left: 30px;
}</code>

Diese Lösung behält das linke schwebende Beschriftungselement bei, während die Reihenfolge der rechten schwebenden Schaltflächen umgekehrt wird, was zur gewünschten Anzeigereihenfolge führt.

Das obige ist der detaillierte Inhalt vonWarum kehrt „float: right' die Reihenfolge der Spans in HTML um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!