web-dev-qa-db-ja.com

HTMLにギャップがあるリーダーボードを正しくエンコードする方法

リーダーボードを次のように表示したい：

1-ジョン232342
2-メアリー45234
3-ルカ234
59-あなた45

順序付きリストですが、3から任意の数にジャンプする順序付きリストは作成できません。

では、どうすればよいですかmark this p？

listsaccessibilityhtmltablesorder
8
Adam Lynch

私がHTML5仕様を正しく読んでいる場合は、ロジャーの回答で提案されているようにして、順序付きリストを使用し、li要素の1つでvalue属性を使用して、いくつかの数値をスキップできます。

リストの最初の項目には、ol要素のstart属性で指定された序数値が含まれます。ただし、li要素に正常に解析できる値の値属性がある場合は、その値属性で指定された序数値が使用されます。

リスト内の後続の各アイテムには、value属性で指定された序数値があります（指定されていない場合は、前のアイテムの序数値、反転が存在しない場合はプラス1、逆の場合はマイナス1）。存在します。

参照： http://www.w3.org/TR/html5/grouping-content.html#the-ol-element

そう

<ol>
<li value="1">John 232342</li>
<li value="2">Mary 45234</li>
<li value="3">Luke 234</li>
<li value="59">You 45</li>
</ol>
3
Kris C

私がこれを見た通常の方法は、省略記号を使用することです。何かのようなもの：

Leaderboard gap with Ellipsis

編集：マークアップの場合、順不同のリストを使用して名前に数字を挿入し、省略記号をアイテムとして使用します。

そうしないと、ユーザーが＃4の場合、省略記号が意味をなさない場合や、ユーザーが＃2の場合など、いくつかの困難な状況になります。

7
JohnGB

ここにいくつかのオプションがあります-しかし、liのvalueはHTML4で非推奨になっていると思います-そしてそれがCSSで実行できるかどうかはわかりません。

<ol start="1">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li value=59>Item 4</li>
   <li>Item 5</li>
</ol>

<DL>
<DT>1
<DD>Item 1
<DT>2
<DD>Item 2
<DT>3
<DD>Item 3
<DT>59
<DD>Item 4
<DT>60
<DD>Item 5
</DL>

これにより、次のようになります。

enter image description here

7
Roger Attrill

Y（またはX）軸にギャップがあることを示す一般的な方法は、取り消し線または点を付けることです。

に似ている：

私50
私40
私30
/
私0

または

私50
私40
私30
...
私0

他のものよりも正しいものはなく、美的観点のより多くのもの...

1
Henrik Ekblom