HTML geordnete Liste mit benutzerdefinierten Text

-3

Ich habe folgende HTML:HTML geordnete Liste mit benutzerdefinierten Text

<ol> 
    <li>foo</li> 
    <li>bar</li> 
    <li>testing</li> 
    <li>hello world</li> 
</ol>

Dies funktioniert natürlich und gibt die folgende Ausgabe:

1. foo 
2. bar 
3. testing 
4. hello world

Nun mein Problem ist, dass ich manchmal braucht haben einen anderen Text anstelle der Zahlen. Der Text sollte vollständig anpassbar sein, so dass CSS :before Lösungen für mich nicht funktionieren.

dieses Beispiel Betrachten wir eine Liste der TV-Serie Episoden:

12. The Duel 
    13. Prince Family Paper 
14./15. Stress relief 
    16. Lecture Circuit: Part 1

So im Wesentlichen ein „fake“ <ol> Ich versuche so zu erstellen, dass der gesamte Text, nachdem die Zahlen korrekt ausgerichtet ist. Gibt es eine Möglichkeit, dies in HTML/CSS zu erreichen?

Quelle

2017-02-14 HackerCow

@AymDev meine Frage wahrsten Sinne des Wortes ist, wie es selbst zu tun, da ich weiß nicht, wie. Beachten Sie, dass ich auch Text zwischen den Aufzählungszeichen anzeigen muss und dass dieser Text ebenfalls aufgereiht sein muss. Ich denke nicht, dass dies eine triviale Aufgabe ist, und ich möchte die Downvoters bitten, zu erklären, warum sie das getan haben. – HackerCow

@AymDev Dies erfüllt meine Anforderungen nicht (siehe https://jsfiddle.net/j0shey6f/). Der Text ist nicht richtig ausgerichtet – HackerCow

Es tut mir leid, aber was Sie sagen, macht keinen Sinn. Ich bin auf ein nicht-triviales Problem gestoßen und habe nach eingehender Recherche entschieden, eine Frage dazu zu stellen. Ich hatte den Eindruck, dass Stackoverflow genau dafür ist. Ich kenne sowohl grundlegende als auch fortgeschrittene Techniken in HTML und CSS, ich konnte einfach keine Lösung finden, die meinen Bedürfnissen entspricht. Da sogar Stackoverflow angeblich momentan keine Antwort auf diese spezielle Frage hat (bedenke, dass der Text, den ich darzustellen versuche, dynamisch ist), denke ich, dass er der Community sogar auf die eine oder andere Weise nützen könnte. – HackerCow

Ich denke, dass Sie es mit einer Tabelle ohne Grenzen lösen müssen. Richte die ersten tds nach rechts und die zweiten nach links aus. Ich denke, das würde am ehesten dem entsprechen, was Sie wollen.

Etwas wie:

css:

table { 
    border: none; 
} 
table tr td:first-child { 
    text-align: right; 
}

html:

<table> 
<tr> 
    <td>12.</td> 
    <td>The Duel</td> 
</tr> 
<tr> 
    <td>13. 
    <td>Prince Family Paper 
</tr> 
<tr> 
    <td>14./15.</td> 
    <td>Stress relief</td> 
</tr> 
<tr> 
    <td>16.</td> 
    <td>Lecture Circuit: Part 1</td> 
</tr> 
</table>

Quelle

2017-02-14 13:36:07

Danke, das funktioniert wie ein Zauber! Ich zögere ein wenig, Tabellenlösungen zu verwenden, aber solange es funktioniert, geht es mir gut ¯ \ _ (ツ) _/¯. Ich denke immer noch, dass die 3 downvotes nicht nötig waren. – HackerCow

Nun, ich habe nicht downvote. Und ja, ich vermeide auch gerne Tische, aber manchmal sind sie unsere besten Freunde. xP –

HTML geordnete Liste mit benutzerdefinierten Text

Antwort

Verwandte Themen