Maison > interface Web > tutoriel CSS > le corps du texte

Pourquoi « float : right » inverse-t-il l'ordre des éléments en ligne ?

Barbara Streisand
Libérer: 2024-10-28 18:11:02
original
546 Les gens l'ont consulté

Why Does `float: right` Reverse the Order of Inline Elements?

Float:right inverse l'ordre des spans : un dilemme CSS

Lorsqu'il s'agit d'éléments en ligne et flottants, un problème inattendu se pose : l'ordre des éléments retourne dans le navigateur. Cette observation se traduit généralement par une utilisation judicieuse de la propriété float. Examinons une situation spécifique pour illustrer le problème.

Considérez la structure HTML suivante :

<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>
Copier après la connexion

En appliquant les règles CSS suivantes, l'intention est de faire flotter les étendues du "bouton" pour à droite :

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

span.label {
    margin-left: 30px;
}</code>
Copier après la connexion

Cependant, dans le navigateur, le "bouton" s'étend de manière décevante dans l'ordre inverse, ce qui entraîne un affichage inattendu de "Importer les paramètres d'exportation" au lieu de la séquence prévue.

Le correctif CSS : adopter la flexibilité

Pour résoudre ce problème déroutant, CSS propose une approche polyvalente : soit inverser l'ordre des éléments flottants dans le HTML, soit introduire un élément conteneur et faites flotter cet élément à la place. Les deux solutions traitent efficacement l'inversion de commande sans modifier la structure HTML existante.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!