web-dev-qa-db-fra.com

Rendre les éléments de la liste ordonnée ABC ayant un style gras

J'ai une liste ordonnée html avec le type défini sur "A"

<ol type="A">...</ol>

Ainsi, chaque élément de la liste commencera par A, B, C, etc.

Je voudrais appeler les lettres A, B, C pour être audacieux. J'ai essayé de définir le poids de la police: gras; via css, mais cela n'a pas fonctionné. Des suggestions sur la façon de faire ceci?

htmlcsshtml-lists
49
Yaakov Ellis

un peu de triche, mais ça marche:

HTML:

<ol type="A" style="font-weight: bold;">
  <li><span>Text</span></li>
  <li><span>More text</span></li>
</ol>

CSS:

li span { font-weight: normal; }
77
peirix

Comme solution alternative et supérieure, vous pouvez utiliser un compteur personnalisé dans un élément before. Cela n'implique aucun balisage HTML supplémentaire. Une réinitialisation CSS doit être utilisée à côté de celle-ci, ou du moins supprimée de l'élément ol (list-style-type: none, reset margin), sinon l'élément aura deux compteurs.

<ol>
    <li>First line</li>
    <li>Second line</li>
</ol>

CSS:

ol {
    counter-reset: my-badass-counter;
}
ol li:before {
    content: counter(my-badass-counter, upper-alpha);
    counter-increment: my-badass-counter;
    margin-right: 5px;
    font-weight: bold;
}

Un exemple: http://jsfiddle.net/xpAMU/1/

46
Speed

Êtes-vous sûr d'avoir correctement appliqué les styles ou qu'il n'y a aucune autre feuille de style interférant avec vos listes? J'ai essayé ceci:

<ol type="A">
<li><span class="label">Text</span></li>
<li><span class="label">Text</span></li>
<li><span class="label">Text</span></li>
</ol>

Puis dans la feuille de style:

ol {font-weight: bold;}
ol li span.label {font-weight:normal;}

Et il a mis en gras A, B, C etc. et non le texte.

(Testé dans Opera 9.6, FF 3, Safari 3.2 et IE 7)

8
Alex Rozanski

Je sais que cette question est un peu ancienne, mais elle revient tout d’abord en tête de nombreuses recherches sur Google. Je voulais ajouter une solution n'impliquant pas l'édition de la feuille de style (dans mon cas, je n'y avais pas accès):

<ol type="A">
  <li style="font-weight: bold;">
    <p><span style="font-weight: normal;">Text</span></p>
  </li>
  <li style="font-weight: bold;">
    <p><span style="font-weight: normal;">More text</span></p>
  </li>
</ol>

6
BoomShadow

Vous pouvez faire quelque chose comme ça aussi:

ol {
  font-weight: bold;
}

ol > li > * {
  font-weight: normal;
}

Donc, vous n'avez pas d'attributs "style" dans votre code HTML

5
Pierre Chavaroche

Vous pouvez faire quelque chose comme ça aussi:

<ol type="A" style="font-weight: bold;">

<li style="padding-bottom: 8px;">****</li>

C'est un code simple pour les débutants.

Ce code a été testé dans "Mozilla, Chrome et Edge ..

0
syed yasser ahmed