Comment modifier l'ordre flottait éléments?

Je ne utiliser float:right dans mon css et maintenant, je n'ai rencontré un problème gênant. Je suis flottant mes éléments de menu à droite

mon HTMl

    <ul id="extMenu">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Feedback</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>

mon CSS

    #extMenuBlock {
    }
        #extMenuBlock ul#extMenu { 
            list-style:none;
            padding:0;
            margin:0; 
        }
        #extMenuBlock ul#extMenu li { 
            float:right;
            padding:5px; 
        }

Maintenant, quand les éléments sont flotteur, je reçois mon menu est cet ordre Contact Feedback Home, mais je veux dans l'ordre inverse ie Home Feedback Contact

Merci pour toutes les solutions, Mais ma question est toujours unanwered, Comment modifier l'ORDRE de la flottait élément?

OriginalL'auteur Starx | 2010-06-25

  1. 6

    À l'aide de display: inline sur les <li>'s peuvent causer des problèmes, surtout si vous êtes éventuellement aller pour les menus déroulants. Je recommande quelque chose de semblable (seulement flotteurs montrer, vous savez ce que d'autres styles que vous souhaitez ajouter):

    #extMenu { float: right; }
#extMenu li { float: left; }

    Donc le menu flottera à droite, tandis que les éléments de menu flottera à gauche.

    Une autre solution serait de simplement inverser l'ordre de tes <li>'

    "À l'aide de display: inline sur les <li>'s peut causer des problèmes" - je serais intéressé par plus de détails sur ce, peut-être référence à une source pour cela.
    +1 @Ryan, une Belle. Cela fonctionne et est compatible IE. Mais j'aimerais entendre quelque chose lié à la modification de l'ordre de la flottait éléments
    Re: Sohnee - w3.org/TR/REC-html40/struct/global.html#h-7.5.3 "en règle générale, les éléments de niveau bloc peut contenir des éléments en ligne et d'autres éléments de niveau bloc. Généralement, les éléments en ligne peuvent contenir que des données et d'autres éléments en ligne." Depuis le &lt;li&gt;'sont maintenant en ligne, ils ne peuvent pas contenir d'éléments de bloc, &lt;div>et &lt;ul>'.
    Re: Starx - Ouais, je cherchais un moyen de changer l'ordre, mais je ne pense pas que ce soit possible, comme flottait éléments "empiler" les uns sur les autres. La seule véritable façon de changer l'ordre est de passer le code HTML, ce qui n'est pas toujours possible.
    Kinal - l'exemple en question ne contient pas tous les éléments de niveau bloc à l'intérieur de l'élément de la liste des éléments, ce qui signifie que vous êtes le codage d'une complexité qui n'existe pas.

    OriginalL'auteur Ryan Kinal

  2. 4

    Essayer cette

    ul#extMenu {
    list-style: none;
    padding: 0;
    margin: 0;
    float: right;
}
ul#extMenu li {
    display: inline;
    padding: 5px;
}
    +1 Bonne réponse - pouvez simplement utiliser text-align: right sur l'UL.
    fonctionne très bien, mais le remplissage ne fonctionne pas comme prévu, le haut et le bas du rembourrage est échappé
    peut-être que ma solution ci-dessous vous aidera à l'époque, ne pas utiliser toute la flotte et le rembourrage semble être préservée.
    Merci pour cette alternative, Mais ma question est toujours unanwered, Comment modifier l'ORDRE de la flottait élément?
    autant que je sache, il n'est pas possible de changer l'ordre de la flotte

    OriginalL'auteur Dejan

  3. 1

    Ce que vous voulez vraiment faire est de faire de chaque li élément un élément inline, et de faire flotter le ul de l'ensemble de la droite (ou l'utilisation text-align: right, si vous préférez).

    Nouveau CSS:

    #extMenuBlock {
    float:right;
}
#extMenuBlock ul#extMenu { 
    list-style:none;
    padding:0;
    margin:0; 
}
#extMenuBlock ul#extMenu li { 
    display:inline;
    padding:5px; 
}
    Merci pour cette alternative, Mais ma question est toujours unanwered, Comment modifier l'ORDRE de la flottait élément?
    ce code doit créer le bon ordre?
    pas de remplissage vertical mec, comment la préserver

    OriginalL'auteur cmrn

  4. 1

    Mon variation de la réponse - pas de flotteurs.

    ul#extMenu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}
ul#extMenu li {
    display: inline;
    padding: 5px;
}
    c'est vraiment une meilleure solution que celle de @dDejan, en évitant de flotter, mais le rembourrage problème subsiste. Pourquoi le haut et le bas du rembourrage être évité? Obtenu une réponse
    Voir ma réponse, c'est pourquoi je suis à l'aide de display:inline-block et pas display:inline. Vous ne pouvez pas donner des éléments inline tout remplissage.
    Merci pour cette alternative, Mais ma question est toujours unanwered, Comment modifier l'ORDRE de la flottait élément?
    qui rembourrage en particulier. Je travaille dans Firefox, et si j'augmente le padding: 5px, je vois le rembourrage en augmentation sur l'écran. Je devrais être en mesure de répondre, si vous le permettez-moi de connaître précisément le problème de remplissage. Des acclamations.
    Je ne comprends pas pourquoi ce n'est pas la accepté de répondre.

    OriginalL'auteur Fenton

  5. 1

    Pourquoi avez-vous choisi de flotter à la droite? Flottant plusieurs éléments vers la droite signifie que le premier élément sera le plus à droite de l'élément et le dernier flottait article sera sur la gauche de votre articles.

    L'aligner votre menu pour le droit et vos articles sur une seule ligne, je voudrais utiliser ce:

    #extMenuBlock {
    text-align: right;
}
#extMenuBlock ul#extMenu {
    list-style:none; padding:0; margin:0;
}
#extMenuBlock ul#extMenu li {
    display: inline-block; padding:5px;
}
    Parce que je veux sur le côté droit
    Merci, j'ai été absent ces informations dans votre question. J'ai ajusté ma réponse à fournir une solution pour vos besoins.
    +1, @codescape, fonctionne parfaitement mais pas ie compatible.
    Merci pour cette alternative, Mais ma question est toujours unanwered, Comment modifier l'ORDRE de la flottait élément?

    OriginalL'auteur stefanglase

  6. 0

    "Partielle" de la réponse pour changer l'ordre d'affichage dans l'exécution:

    http://plugins.jquery.com/project/reverseorder

    C'est un plugin jQuery. Vous pouvez inverser l'ordre des éléments dans votre exemple avec

    $('#extMenu li').reverseOrder();

    Pas vraiment une manière élégante, mais elle fonctionne (si JavaScript est activé, bien sûr...)

    OriginalL'auteur Scorchio