HTML/CSS Auflistung mit Tabstopp

Push-Nachrichten von MacTechNews.de

Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?

Forum>Netzwerke>HTML/CSS Auflistung mit Tabstopp

dom_beta17.05.1223:42

Hallo,

gibt es in HTML und/oder mit CSS die Möglichkeit, eine Auflistung zu erstellen mit Tabstopps?

Siehe Bild. Geht so was?

„...“

Kommentare

sierkb18.05.1201:58

Zum Beispiel als Definitionsliste <dl>:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
   <title>Test</title>
   <style type="text/css">
     dt {
     float: left;
     clear: left;
     width: 120px;
     margin-right: 2em;
     }
     dt::before {
     content: "\2022\00a0";
     }
   </style>
</head>
<body>
   <dl>
     <dt>12 Uhr</dt>
     <dd>Dies & Das</dd>
     <dt>14 bis 16 Uhr</dt>
     <dd>Jenes</dd>
   </dl>
</body>
</html>

dom_beta18.05.1202:48

Oh hallo Sierk!

Danke für deine Antwort.

Kurze Nachfrage meinerseits:

Was bedeutet dies?
dt::before {
content: "\2022\00a0";
}

Genau: Was bedeutet diese Zahlenkombination?

„...“

sierkb18.05.1210:06

Genau: Was bedeutet diese Zahlenkombination?

Unicode-Zeichen.
U+2022 BULLET • ,
U+00A0 NO-BREAK SPACE (NBSP/Geschütztes Leerzeichen) ,

Zu "content":

W3C CSS 2.1: 12 Generated content, automatic numbering, and lists , 12.2 The 'content' property

Sprich:

dt::before {
content: "\2022\00a0";
}

setzt mit ::before jedem dt ein Bullet (•) und ein geschütztes Leerzeichen (nbsp) vor die Nase.

dom_beta19.05.1223:59

Gibt es auch eine Möglichkeit, das zweizeilig zu gestalten?

Wenn also das <dd> zuviel Text enthält?

„...“

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.

Das MacBook Pro M4

macOS 15.3, iOS 18.3: Beta 2

iOS 18: Kritik an neuer Fotos-App reißt nicht ab

iPad Pro M4 wird grün – Displayfehler bei immer...

Bericht: Produktionsstopp der Apple Vision Pro?

IMAP und Abstürze: Apple bekommt die Probleme m...

20 Jahre Mac mini

Mac OS X: 25 Jahre Aqua, 25 Jahre Dock