it-swarm.com.de

So codieren Sie eine Bestenliste mit einer Lücke in HTML korrekt

Ich möchte eine Rangliste wie folgt anzeigen:

1 - John 232342
2 - Mary 45234
3 - Lukas 234
59 - Sie 45

Es ist eine geordnete Liste, aber ich kann keine geordnete Liste erstellen, die von 3 auf eine beliebige Zahl springt.

Also, wie soll ich markieren dies auf?

8
Adam Lynch

Wenn ich die HTML5-Spezifikation richtig lese, können Sie wie in Rogers Antwort vorgeschlagen eine geordnete Liste verwenden und dann ein Wertattribut für eines der li-Elemente verwenden, um einige Zahlen zu überspringen:

Das erste Element in der Liste hat den Ordnungswert, der durch das Startattribut des ol-Elements angegeben wird, es sei denn, dieses li-Element verfügt über ein Wertattribut mit einem Wert, der erfolgreich analysiert werden kann. In diesem Fall hat es den Ordnungswert, der durch dieses Wertattribut angegeben wird.

Jedes nachfolgende Element in der Liste hat den Ordnungswert, der durch sein Wertattribut angegeben wird, wenn es einen hat, oder, falls dies nicht der Fall ist, den Ordnungswert des vorherigen Elements, plus eins, wenn das Umgekehrte fehlt, oder minus eins, wenn es vorhanden ist ist anwesend.

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

Damit

<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

Die übliche Art, wie ich das gesehen habe, ist mit einer Ellipse. Etwas wie:

Leaderboard gap with Ellipsis

Bearbeiten: Für Markups würde ich eine ungeordnete Liste verwenden und die Zahlen in den Namen einfügen und die Auslassungspunkte als Element verwenden.

Andernfalls kommt es zu schwierigen Situationen, wenn der Benutzer die Nummer 4 ist, da Sie eine Ellipse haben, in der dies keinen Sinn ergibt, oder wenn der Benutzer die Nummer 2 ist.

7
JohnGB

Hier sind einige Optionen - aber ich denke, li's Wert ist in HTML4 veraltet - und ich weiß nicht, ob dies in CSS möglich ist.

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

Dies ergibt Folgendes:

enter image description here

7
Roger Attrill

Die übliche Art zu zeigen, dass eine Y- (oder X-) Achse eine Lücke aufweist, besteht darin, einen Durchschlag oder Punkte zu machen.

ähnlich zu:

Ich 50
I 40
I 30
/
I 0

oder

Ich 50
I 40
I 30
...
I 0

Keiner ist korrekter als der andere, eher ein ästhetischer Standpunkt ...

1
Henrik Ekblom