HTML + CSS: liste numérotée avec des nombres à l'intérieur de cercles
J'essaie de créer une liste ordonnée en CSS + HTML qui ressemble à ceci: 
Je ne peux pas pour la vie de comprendre comment faire cela. J'ai essayé d'utiliser list-image mais les chiffres ne s'affichent pas. J'ai essayé de définir un arrière-plan, mais celui-ci n'apparaîtra pas derrière le numéro si list-style-position est défini sur outside. J'ai essayé de le définir avec un arrière-plan et un list-style-position: inside, puis de placer le texte dans la li dans une div pour l'aligner, mais aucune combinaison de flottants, marges, etc. ne fonctionnait sans envelopper le chiffre.
Cela semble être quelque chose que j'ai vu sur de nombreux sites Web, mais pour le moment, je n'arrive pas à trouver un exemple concret, et Google ne donne aucun résultat.
Alors, est-ce que quelqu'un peut m'aider avec ça? Comment créeriez-vous ce qui précède en utilisant HTML + CSS, idéalement sans JS, et certainement sans utiliser uniquement des images. Ce texte doit pouvoir être sélectionné et copié/collé.
Parce qu'un intervenant a demandé, voici le balisage que j'ai maintenant:
<ol>
<li><span>List item one.</span></li>
<li><span>List item two.</span></li>
<li><span>List item three.</span></li>
</ol>
Aucune des CSS que j'ai essayées n'a été utilisée, donc je ne suis pas sûre de l'intérêt de partager 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; }
La présentation horizontale de la question peut être réalisée à l'aide de CSS float et/ou display:inline-block;. Celles-ci sont bien documentées à ce sujet, car les éléments de liste sont souvent utilisés pour créer des menus déroulants à l'aide de cette technique. Par conséquent, je n'en parlerai pas davantage ici.
L'aspect du numéro encerclé est un peu plus délicat.
Cela ne peut pas être réalisé à l'aide de styles de liste standard, à moins que vous ne soyez prêt à utiliser des graphiques et à coder en dur le nom de l'image. C'est une approche plutôt old school et je suppose que ce n'est pas ce que vous recherchez.
Une idée qui m'est venue à l'esprit serait d'utiliser une police dont les numéros sont entourés de cercles, tel que celui-ci , puis de simplement styler l'élément <ol> pour l'utiliser, et l'élément <li> pour utiliser votre police standard . L'inconvénient est que vous devez conserver votre liste en dessous de 10 éléments et que le navigateur de l'utilisateur doit télécharger une police complète rien que pour cela. En outre, vous devez en choisir une qui corresponde aux autres polices de votre site. Ce n’est probablement pas une solution idéale, mais cela fonctionnerait.
Une solution plus pratique consisterait à abandonner complètement le style de liste (utilisez toujours le même balisage HTML, mais définissez list-style:none;). Les nombres seraient ensuite insérés à l'aide des fonctionnalités :before et count() peu utilisées de CSS.
Dans votre cas, cela irait dans le sens suivant:
ol ul:before {
content: counter(mylist);
}
Cela vous donnera la même séquence numérotée. Vous devrez ensuite ajouter d'autres styles au sélecteur ci-dessus pour lui donner un fond de cercle, des couleurs et un peu de marge. Vous auriez également besoin de styler l'élément <li> de façon à ce que tout son texte soit mis en retrait du nombre plutôt que d'être placé au-dessous du nombre. Je suppose que cela pourrait être fait avec display:inline-block; ou similaire.
Il faudra peut-être un peu d'expérimentation, et je n'ai pas donné la réponse complète, mais la technique fonctionnerait certainement.
Voir quirksmode.org pour un résumé et des exemples, ainsi qu'un tableau de compatibilité de navigateur.
Et le tableau de compatibilité du navigateur donne un indice sur le principal inconvénient de cette technique: cela ne fonctionnera pas dans IE7 ou une version antérieure. Cela fonctionne dans IE8 et dans tous les autres navigateurs, donc si vous pouvez vivre avec les utilisateurs d'IE7 qui ne le voient pas (et ils ne sont pas nombreux ces jours-ci), alors tout devrait bien se passer.
J'utilise les idées de @Spudley dans sa réponse, et j'utilise des idées d'une réponse précédente que j'ai écrite:
Voir:http://jsfiddle.net/j2gK8/
IE8 ne prend pas en charge border-radius et les solutions de contournement telles que CSS3 PIE ne fonctionnent pas avec :before. Et les anciens navigateurs comme IE7 ne supportent pas counter.
Si vous voulez le faire fonctionner dans les anciens navigateurs, vous devrez vous-même écrire les chiffres. J'ai également échangé les coins arrondis sophistiqués contre une image normale (qui pourrait avoir coins arrondis, mais ce n'est pas le cas dans mon exemple):
Voir:http://jsfiddle.net/XuHNF/
Il y a donc une approche sophistiquée qui ne fonctionnera pas dans IE7 + IE8, qui l'exclut probablement. Et puis il y a la méthode laide, mais compatible.
Bien sûr, il y a toujours un autre problème. Si vous avez des quantités de texte différentes, alors cela se produit .
Vous regardez alors ce problème:
Si quelqu'un lit encore ceci, j'ai rencontré le même problème et trouvé un tutoriel extrêmement utile.
Style des numéros de liste ordonnée
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;}
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
Je voudrais utiliser flexbox et ajouter «divs» au «li» contenant le nombre.
<div class="container">
<ul class="info-list">
<li><div>1.</div> CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
<li><div>2.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
<li><div>3.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
</ul>
<ul class="info-list">
<li><div>4.</div> CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
<li><div>5.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
<li><div>6.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
</li>
</ul>
</div>
CSS:
.container {
display: flex;
}
.info-list li {
list-style: none;
display: flex;
}
.info-list li > div {
display: inline-block;
border: 2px solid #ccc;
border-radius: 100%;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: space-around;
margin-right: 10px;
}
Sur codepen: https://codepen.io/mkempinsky/pen/OBNXGO
Je trouve que les navigateurs placent list-style-image à différents endroits et l’un n’a que le contrôle de position "extérieur" et "intérieur".
Je recommande ce qui suit:
REMARQUE: Vous pouvez également utiliser float pour les disposer ou ce que j'ai fait. En outre, cela suppose que vous connaissez les sprites.
J'espère que cela a du sens.
content: counter (li) avec incrément ne fonctionne pas dans mon moins j'ai donc trouvé un wokraround :)
li {
position: relative;
line-height: 2.5em;
list-style-type: none;
&:before{
content: '';
position: absolute;
left: -29px;
top: 7px;
display: block;
background: @btn-bg-secondary;
width: 20px;
height: 20px;
border-radius: 50%;
color: @bg-color-primary;
padding-left: 7px;
line-height: 1.5em;
}
&:nth-child(1):before{
content: '1';
}
&:nth-child(2):before{
content: '2';
}
&:nth-child(3):before{
content: '3';
}
&:nth-child(4):before{
content: '4';
}
&:nth-child(5):before{
content: '5';
}
&:nth-child(6):before{
content: '6';
}
&:nth-child(7):before{
content: '7';
}
&:nth-child(8):before{
content: '8';
}
}
EDIT: J'ai modifié le code alors essayez de faire correspondre ce que vous avez
J'ai essayé de faire cela avec un carrousel que je fabriquais avec une image et un lien à l'intérieur de chaque élément de 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 article. Pour les faire apparaître horizontalement, 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 */
}
Cela a fait toutes les images aligner horizontalement. Pour éditer chaque élément de la liste, vous devez les placer dans divs, puis éditer le css à partir de là. Une fois que vous les avez tous flottant de la même manière, les CSS à l'intérieur des divs ne devraient pas vous poser de problèmes. Vous pouvez simplement les nommer par classe comme ceci:
.listNumber
{
postion: absolute;
left: (#)px;
top: (#)px;
}
Je me souviens également que je devais m'assurer que la liste contenait au moins la largeur de chaque élément avant de pouvoir les faire flotter. Si ce n'était pas le cas, ils seraient assis au fond.