it-swarm.dev

ABC-Sortierte Listenelemente fett formatieren

Ich habe eine HTML-Sortierte Liste mit dem Typ "A"

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

Daher beginnt jedes Listenelement mit A, B, C usw.

Ich möchte die Buchstaben A, B, C fett formatieren. Ich habe versucht, das Schriftgewicht einzustellen: Fett; via css, aber es hat nicht funktioniert. Irgendwelche Vorschläge, wie das geht?

49
Yaakov Ellis

ein bisschen schummeln, aber es funktioniert:

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

Als alternative und überlegene Lösung können Sie einen benutzerdefinierten Zähler in einem Vorher-Element verwenden. Es beinhaltet kein zusätzliches HTML-Markup. Ein CSS-Reset sollte daneben verwendet werden oder zumindest das Styling aus dem ol-Element (list-style-type: none, reset margin) entfernt werden, andernfalls hat das Element zwei Zähler.

<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;
}

Ein Beispiel: http://jsfiddle.net/xpAMU/1/

46
Speed

Sind Sie sicher, dass Sie die Stile richtig angewendet haben oder dass kein anderes Stylesheet in Ihre Listen eingreift? Ich habe das versucht:

<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>

Dann im Stylesheet:

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

Und es wurde die A, B, C usw. fett hervorgehoben und nicht der Text.

(Getestet in Opera 9.6, FF 3, Safari 3.2 und IE 7)

8
Alex Rozanski

Ich weiß, dass diese Frage etwas alt ist, aber sie steht bei vielen Google-Suchen immer noch an erster Stelle. Ich wollte eine Lösung hinzufügen, bei der das Stylesheet nicht bearbeitet wird (in meinem Fall hatte ich keinen Zugriff):

<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

Sie könnten auch so etwas tun:

ol {
  font-weight: bold;
}

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

Sie haben also keine "style" -Attribute in Ihrem HTML

5

Sie könnten auch so etwas tun:

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

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

Es ist einfacher Code für Anfänger.

Dieser Code wurde in Mozilla, Chrome und Edge getestet.

0