Horizontal Liste Ordonnée (et IE)

Je suis à la recherche pour générer un résultat semblable à ceci:

1. One      2. Two      3. Three      4. Four

de le Code HTML suivant

<ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ol>

Il semble qu'Internet Explorer ne peut pas afficher le nombre de (élément de liste) lorsque vous flotteur de la li dans le but de les rendre à l'horizontale.

Quelqu'un a rencontré ce et trouvé une solution que je peux utiliser?

OriginalL'auteur Michael | 2009-02-23

  1. 8

    Ce code fonctionne dans tous les navigateurs que j'ai testé. Si vous n'avez pas trouvé encore de réponse, la suggestion la plus populaire réponse est valable. Il suffit d'ajuster la largeur de votre si vous le souhaitez envelopper.

    <ol style="list-style-type:decimal; width: 600px;">
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
</ol>

ol.horizontal{
    list-style-type: decimal;
    width: 600px;
}

ol.horizontal li{
    float: left;
    width: 200px;
    padding: 2px 0px;
}

<ol class="horizontal">
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
</ol>
    Ne fonctionne pas sous IE7 pour moi. Quel DOCTYPE utilisez-vous?
    Des œuvres. Comme une suggestion, vous pouvez ajouter cette ligne après la fin de la liste pour éviter le flotteur de déconner avec le contenu: <div style="clear: both;"></div>
    Il ne fonctionne pas sur chrome 26

    OriginalL'auteur M. Williams

  2. 9

    Pouvez-vous utiliser cette CSS?

    li  {display: inline}

    MODIFIER: Cela ne permet pas de conserver l'élément de numérotation, et je ne suis pas au courant de toute méthode qui ne. En tant que substitut, je suppose que tout ce que vous pouvez faire est d'insérer manuellement les numéros, jusqu'à ce que les navigateurs d'avoir un meilleur support pour les CSS compteurs.

    Cette solution gouttes de la liste ordonnée des nombres d'éléments dans IE, Firefox, Opera et Safari. De sa question je suis en supposant qu'il veut préservé.
    Bon point... je vais voir si je peux trouver quelque chose et de le modifier dans.
    J'ai essayé li { display: inline; list-style-type: decimal; } mais il n'a eu aucun effet dans la liste des navigateurs.
    J'ai essayé ça aussi, même résultats. J'ai aussi essayé de déconner avec le CSS compteurs, mais ils ne fonctionnent pas correctement dans 3 FF ou IE (7 je crois).
    je ne pense pas que c'est vraiment une bonne solution... je ne suis même au courant si cela fonctionne (je n'ai pas tester...). Le flottant des Entrées de la Liste plus facile et u ont toujours la possibilité de masquer certains éléments avec display:none;. Les Nombres peuvent être précédées de list-style-type:decimal;

    OriginalL'auteur David Z

  3. 4

    J'ai essayé tous les display bien sur cette page et aucun d'eux de préserver la liste ordonnée des nombres lors de l'affichage de la liste horizontalement dans IE (ne le sont-ils conservés dans Firefox, Opera ou Safari pour Windows - et, par extension, probablement Google Chrome, même si j'avoue que je n'ai pas testé tous les display propriété).

    La seule solution (partiellement - dans Firefox uniquement) les œuvres est Al W réponse.

    Je pense que si vous voulez l'horizontale de la liste numérotée, vous allez avoir à générer sur le serveur ou de manipuler la liste sur le client à l'aide de JavaScript à insérer de nouveau les chiffres.

    La version de Firefox cache les numéros pour vous? Je les vois bien dans FF3.0. Si c'est un bug ou pas, c'est discutable.
    Ce que je disais c'est que la liste ordonnée de nombres ne sont pas conservées lorsque vous utilisez li { display:inline; }. Ils sont conservés dans Firefox lorsque vous utilisez li { float:left; width:30px; } (comme par Al W-réponse).

    OriginalL'auteur Grant Wagner

  4. 4

    Bon, vous devez ajouter un flotteur, de la largeur et de la list-style-type d'attribut pour le css. Ressemble à ceci:

    li{ 
float:left; 
largeur:50px; 
list-style-type:decimal; 
}

    Gushiken

    OriginalL'auteur SvenFinke

  5. 1

    vous ne pouvez pas définir la largeur des éléments inline.
    donc, je finissent généralement flottant au lieu

    li
{
    float: left;
    width:30px;
}
    Cette solution gouttes de la liste ordonnée des nombres d'éléments dans IE6, 7 & 8RC1, Google Chrome et Safari pour Windows 3.2.2. Il préserve la liste ordonnée des nombres dans Firefox 2, 3 et 3.1b2. De sa question je suis en supposant qu'il veut préservé.

    OriginalL'auteur Al W

  6. 0

    css: 

    li { display:inline; }
    Cette solution gouttes de la liste ordonnée des nombres d'éléments dans IE, Firefox, Opera et Safari. De sa question je suis en supposant qu'il veut préservé.

    OriginalL'auteur Quintin Robinson

  7. 0

    J'ai trouvé cette page sur IE hasLayout utile. Il comprend la discussion sur la liste de mise en forme (le lien pointe vers la section listes de la page)

    OriginalL'auteur