HTML + CSS: liste numérotée avec des nombres à l'intérieur de cercles

Question

Je suis en train de créer une liste ordonnée en CSS + HTML qui ressemble à ceci:

Je ne peux pas pour la vie de me comprendre comment le faire. J'ai essayé à l'aide d' list-image mais ensuite, les chiffres n'apparaissent pas. J'ai essayé de réglage de l'arrière-plan, mais il ne s'affiche pas derrière le numéro cas list-style-position est définie à l' outside. J'ai essayé de réglage avec un arrière-plan et list-style-position: inside, puis de mettre le texte à l'intérieur de l' li en div pour l'aligner, mais aucune combinaison de chars, les marges, etc travaillé sans enrouler autour du chiffre.

Cela semble être quelque chose que j'ai vu sur beaucoup de sites web, mais pour le moment je n'arrive pas à trouver un exemple de travail, ni à Googler pour cela de me donner tous les résultats.

Donc, quelqu'un peut-il m'aider? Comment voulez-vous créer le dessus à l'aide de HTML+CSS, idéalement sans utiliser de JS, et certainement sans l'aide de simples images. Ce texte doit être possible de le sélectionner et le copier/pasteable.

Parce qu'un auteur a demandé, voici le balisage j'ai droit:

<ol>
  <li><span>List item one.</span></li>
  <li><span>List item two.</span></li>
  <li><span>List item three.</span></li>
</ol>

Aucun des CSS, j'ai essayé en est même venu près de de travail, donc je ne suis pas sûr de la valeur de partage de ce que j'ai actuellement. Voici une version qui a échoué...

ol { display: block; list-style: decimal outside url('/images/lists/yellow-circle-18px.png'); }
ol li { width: 176px; margin-right: 20px; float: left; }
ol li span { display: block; }

Answer 1

Je suis en utilisant les idées que @Spudley a, dans sa réponse, et je suis en utilisant des idées à partir d'une précédente réponse, j'ai écrit:

• Comment CSS un certain nombre à être entouré par un cercle?

Voir: http://jsfiddle.net/j2gK8/

IE8 ne prend pas en charge border-radius, et des solutions de rechange comme la TARTE CSS3 ne fonctionne pas avec l' :before. Et, les plus anciens navigateurs tels que IE7 ne prennent pas en charge counter.

Si vous voulez la faire fonctionner dans les navigateurs plus anciens, vous devrez recourir à écrire les nombres vous-même. J'ai aussi échangé la fantaisie des coins arrondis pour une image normale (ce qui pourrait avoir des coins arrondis, mais n'est pas dans mon exemple):

Voir: http://jsfiddle.net/XuHNF/

Donc, il y a la fantaisie approche qui ne fonctionne pas dans IE7+IE8, ce qui a probablement des règles de sortir. Et puis il y a le laid, mais compatibles méthode.

Bien sûr, il y a toujours un autre problème. Si vous avez des montants différents de texte, puis ce qui se passe.

Vous êtes alors à la recherche à ce problème:

• CSS Flottant Vrd À Hauteurs Variables
• http://stackoverflow.com/search?q=user%3A405015+maçonnerie

Answer 2

La mise en page horizontale aspect de la question qui peut être réalisé à l'aide de CSS float et/ou display:inline-block;. Ce sont bien documentés, ainsi que les éléments de liste sont souvent utilisés pour créer des menus déroulants à l'aide de cette technique, donc je ne vais pas en discuter ici.

Le numéro encerclé aspect est un peu plus compliqué.

Il ne peut pas être réalisé en utilisant la norme de styles de liste, sauf si vous êtes prêt à utiliser des graphiques, et de coder en dur le nom de l'image de chacun. C'est tout à fait un vieux de la démarche de l'école, et je soupçonne que c'est pas ce que vous cherchez.

Une idée qui a surgi dans ma tête serait d'utiliser une police qui a ses chiffres dans les cercles, comme les ce l'un, et puis tout simplement le style de l' <ol> élément à utiliser cette police, et l' <li> élément à utiliser votre police de caractères normale. L'inconvénient de cette est que vous auriez à garder votre liste ci-dessous les 10 articles, et le navigateur de l'utilisateur aurait besoin de télécharger un ensemble de polices juste pour ça. Aussi, vous devez en choisir un qui correspond au autres polices sur votre site. Probablement pas une solution idéale, mais il pourrait fonctionner.

Une solution plus pratique serait d'abandonner le style de liste entièrement (toujours utiliser la même balise HTML, mais list-style:none;). Les chiffres étaient ensuite être inséré à l'aide de CSS, qui sont peu utilisés :before et count() fonctionnalités.

Dans votre cas, il serait le long des lignes suivantes:

ol ul:before {
    content: counter(mylist);
}

Cela vous donnera le même numéro de séquence. Vous devez ensuite ajouter d'autres styles pour le sélecteur ci-dessus pour lui donner un cercle d'arrière-plan, des couleurs, et un peu de marge. Vous aussi, vous avez besoin pour le style de l' <li> élément d'une certaine manière, de sorte que son texte a été mis en retrait à partir du nombre plutôt que l'enchaînement ci-dessous le nombre. Je m'attends à ce qui pourrait être fait avec display:inline-block; ou similaire.

Il pourrait avoir besoin d'un peu d'expérimentation, et je n'ai pas donné de réponse complète, mais la technique serait certainement travailler.

Voir quirksmode.org pour une description et des exemples, le long avec un navigateur graphique de compatibilité.

Et la compatibilité avec les navigateurs tableau donne une indication de l'un des grands bas-côté de cette technique: Il ne fonctionnera pas dans IE7 ou plus tôt. Il ne fonctionne pas avec IE8 si, et dans tous les autres navigateurs, donc si vous pouvez vivre avec les utilisateurs d'IE7 pas de le voir (et il n'y a pas que beaucoup d'entre eux ces jours-ci), il devrait être bon.

Answer 3

Si quelqu'un lit encore ceci, j'ai rencontré le même problème et trouvé un tutoriel extrêmement utile.

Styling ordonné numéros de liste

 ol {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}
ol > li {
    position:relative; /* Create a positioning context */
    margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
    padding:4px 8px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */
    border-top:2px solid #666;
    background:#f6f6f6;
}
ol > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding:4px;
    border-top:2px solid #666;
    color:#fff;
    background:#666;
    font-weight:bold;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align:center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}
 

Answer 4

Je pense avoir trouvé une solution pour cela. Votre code HTML serait

 <ol>
   <li>First item</li>
   <li>Second item</li>
</ol>
 

Si vous appliquez les styles suivants, cela ressemble beaucoup à un cercle:

 ol {margin-left:0; padding-left:0; counter-reset:item}
ol>li {margin-left:0; padding-left:0; counter-increment:item; list-style:none inside;margin-bottom:10px}
ol>li:before {
content:"(" counter(item) ")";
padding:3px 5px;
margin-right:0.5em;
background:#ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; 
}
 

Je voudrais ensuite jouer avec les rembourrages et le rayon afin de le faire apparaître comme un cercle

Answer 5

EDIT: j'ai modifié le code afin d'essayer de correspondre à ce que vous avez

J'ai essayé de le faire avec un carrousel que je faisais avec une image et un lien à l'intérieur de chaque élément de la liste comme ceci:

   <ol id = "list">
     <li class = "listItems">
       <!-- Image -->
       <img src = "YourImage" class = "listNumber"></div>
       <!-- Text -->
       <div class = "listInfo">Info goes here</div>
     </li> 
   </ol>

et ainsi de suite pour chaque élément. Pour les faire apparaître à l'horizontale mon css ressemblait à ceci:

#list
{
    list-style: none;
    width: 5000px;  /* Total width of list IMPORTANT*/
}
    /* Image gallery list item*/
    #list li
    {
        float :left;    /* Arranges the items in a horizontal list IMPORTANT */
    }

Qui a fait toutes les images de la ligne à l'horizontale. Pour modifier chaque élément à l'intérieur de la liste, vous devrez les placer en divs et ensuite modifier le css à partir de là. Une fois que vous les avez tous flottante de la même manière, le css à l'intérieur de la divs ne devrait pas vous donner de problème. Vous pouvez juste le style par classe comme ceci:

.listNumber
{
  postion: absolute;
  left: (#)px;
  top: (#)px;
}

Je me souviens aussi que j'avais besoin à fait sûr que la liste était au moins de la largeur de chaque élément en elle avant que je puisse les faire flotter toute la gauche. Si ce n'était pas le cas, alors ils devraient s'asseoir sur le fond.