comment puis-je afficher des nombres sur une ligne liste ordonnée?

J'ai une liste.. 

<ol>
    <li>Login</li>
    <li>Address</li>
    <li>Shipping</li>
</ol>

Il montre les nombres décimaux bien, mais lorsque j'ai mis le <li> à inline ou inline-block, les numéros de disparaître! J'ai vu d'autres endroits en ligne mentionné que j'ai pour m'assurer d'avoir assez de marge et le remplissage.. et je suis sûr que je fais (10 px de chaque!) Est-ce pour une autre raison, ces chiffres pourraient être en train de disparaître? Je sais de firebug que dès que j'ai décocher 'inline' ils reviennent...

le css est

ol{
padding: 20px; 
list-style-type:decimal;
}
ol li {
display: inline;
margin: 0 10px;
padding: 0 10px;
}
  • Essayez d'augmenter la valeur de la marge et de voir si cela fait une différence
  • Juste pour être complet, avez-vous essayé plus de 10px?
InformationsquelleAutor Damon | 2011-01-10
  1. 17

    Je ne sais pas pourquoi cela arrive, mais il peut être résolu par flottante gauche au lieu de display: inline

    Voir https://jsfiddle.net/CMKzK/

    ol {
    padding: 20px; 
    list-style-type: decimal;

}
ol li {
    float: left;
    margin: 0 10px;
    padding: 0 10px;
}
    • C'est tout à fait injuste, seulement flotteur pour une mise en page
    • centrage dynamique flottant contenu est peut-être juste impossible
    InformationsquelleAutor Eric Fortis
  2. 11

    Vous pouvez essayer ceci:

    CSS:

    ol
{
  /* List will start at 25 + 1 = 26 */
  /* Remove the 25 if you want to start at 1 */
  counter-reset: LIST-ITEMS 25;
}

li
{
  display: inline;
  padding-right: 0.5em;
}

li:before
{
  content: counter( LIST-ITEMS ) ".";
  counter-increment: LIST-ITEMS;
  padding-right: 0.25em;
  font-style: italic;
  font-weight: bold;
}

    HTML:

    <ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</li>
  <li>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li>
  <li>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</li>
  <li>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</li>
  <li>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</li>
  <li>proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ol>

    InformationsquelleAutor nico
  3. 5

    Si vous n'avez pas de soins sur les anciennes versions d'IE, vous pouvez utiliser automatique des compteurs et la numérotation

    Sinon, vous devez spécifier manuellement les numéros (@babiker a la solution), ou float votre li's (@Eric Fortis solution).

    • C'est génial... bien mieux que de flotteurs! Je ne peux pas croire combien de temps j'ai été un dev front-end et je ne savais pas à ce sujet... 🙁
    InformationsquelleAutor zzzzBov
  4. 0

    J'ai contourné le problème de l'ol numéros se bousculés par de gauche les éléments flottants avec les éléments suivants:

    li {
    overflow:hidden;
    list-style-position: inside;
    display:block;
}
.number {
    display:list-item;
    position:absolute;
}
.first-item {
    float:left; 
    /* revise margin to your needs */       
    margin-left:35px;
}
.second-item {
    float:left;
}

    compte tenu de la suite de DOM:

    <ol id="playlist">

        <li>
            <div class="number"></div>
            <a class="first-item" href="#">click here</a>
            <div class="second-item">some detail</div>
        </li>
</ol>

    semble fonctionner avec inline-block éléments.

    • Ce ne semble pas être de travailler avec IE11. Tous les éléments de liste sont les numéros de 1.
    InformationsquelleAutor hedgehog