Pourquoi « float : right » inverse-t-il l'ordre des spans en HTML ?

Float : ordre inverse des travées à droite

Étant donné le balisage HTML :

<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>

application du CSS :

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

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

entraîne un ordre d'affichage inattendu dans le navigateur, les étendues s'affichant sous la forme "Paramètres d'importation et d'exportation" au lieu de l'ordre dans la source HTML.

Solution

Pour résoudre ce problème sans modifier le HTML, le CSS peut être ajusté. Une approche consiste à inverser l'ordre des éléments flottants de droite :

<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>

Cette solution conserve l'élément d'étiquette flottant de gauche tout en inversant l'ordre des boutons flottants de droite, ce qui donne l'ordre d'affichage souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!