2

divタグ付きのタグがありますspan。divCSS または JavaScript でクラス名を使用してタグの番号付きリストを追加する方法

<div id="editsum">
    <div class="esum"><span id="1430568488933" class="tbold">nde</span></div>
    <div class="esum"><span id="1430568576033" class="tbold">ca</span></div>
    <div class="esum"><span id="1430568582173" class="tdel">tim</span></div>
    <div class="esum"><span id="1430568582173" class="tins">Ó</span></div>
    <div class="esum"><span id="1430914284123" class="tdel">non</span></div>
    <div class="esum"><span id="1430914309275" class="tdel">cu</span></div>
</div>
4

2 に答える 2

7

番号付きリストを出力する場合、タグを使用するのが最善の方法ですが<ol>、HTML を変更できず、番号付きリストとして出力する必要がある場合は、CSS カウンターを使用して番号付きリストの動作を実現できます。 .

body {
  counter-reset: esum;
}
.esum {
  position: relative;
  counter-increment: esum;
  padding: 10px;
}
.esum:before {
  content: counter(esum)".";
}
<div class="esum"><span id="1430568488933" class="tbold">nde</span>
</div>
<div class="esum"><span id="1430568576033" class="tbold">ca</span>
</div>
<div class="esum"><span id="1430568582173" class="tdel">tim</span>
</div>
<div class="esum"><span id="1430568582173" class="tins">Ó</span>
</div>
<div class="esum"><span id="1430914284123" class="tdel">non</span>
</div>
<div class="esum"><span id="1430914309275" class="tdel">cu</span>
</div>

于 2015-05-11T08:02:31.937 に答える
2

CSS

.esum {
  display: list-item;
  margin-left: 1.5em;
  list-style-type: decimal;
}

上記のCSSを CSS ファイルに追加します

デモ

于 2015-05-11T08:06:21.657 に答える