Stil eine definitition Liste als einfacher Schlüssel-Wert-Set

Question

Ich möchte eine Definitionsliste so einfach verwenden wie:

<dl>
  <dt>name:</dt>
  <dd>Tomas</dd>

  <dt>address:</dt>
  <dd>this is a very long wrapping address</dd>

  <dt>age:<dt>
  <dd>29</dd>
<dl>

machen so etwas wie:

name: Tomas
address: this is a very long
wrapping address
age: 29

Die Definition Liste scheint semantisch die beste Option hier.

Mit dem neuen Anlauf in Anzeigestil den Trick:

<style> dt { display: run-in; } </style>

Das ist aber noch nicht weit unterstützt. Wie kann ich meine Definitionsliste für eine bessere Cross-Browser-Unterstützung (IE6 nicht erforderlich) Stil, ohne die HTML-Wechsel (zur Zeit I Anzeige Inline verwenden und hässlich br add)?

Bearbeiten zu klären:

dt { clear: left; }
dd { float: left; }

wird nicht funktionieren, weil es machen würde, wie:

name: Tomas
address: this is a very long
         wrapping address
age: 29

Das Design gibt an, dass dieses mehrzeiliges Feld zu Beginn der Zeile umbrochen sollte Raum zu erhalten.

Answer 1

ich denke, das würde funktionieren:

dt {
  float: left;
  clear: left;
  margin: 0;
  padding: 0 .5em 0 0;
}
dd {
  margin: 0;
  padding: 0;
}

Eine weitere Option, die nützlich ist, ist die :after Pseudoklasse. Sie könnten den Darm auf jedem der dt Elemente überspringen und haben:

dt:after {
  content: ":";
}

Das macht es flexibel und Sie können das Zeichen auf der Liste und die Website als Ganzes ändern, oder es loswerden, wenn Sie wie es sich anfühlte.

das Verpackungs Problem zu lösen, die Sie erwähnt, werden Sie sowohl auf Schränkungsweiten müssen auf der dt und dd Elemente. Oder verwenden Sie eine Tabelle, mit th für Name / Adresse usw. und td für die „Daten“. IMO eine Tabelle ist eine semantisch akzeptable Lösung hier -. Es is tabellarische Daten

Answer 2

Sie können nur schwimmen die dd links von dem vorherigen Element wie so.

dt { clear: left; }
dd { float: left; }

Sie können auch eine Breite Attribut entweder für zusätzliche Ausrichtung hinzuzufügen.

dt { clear: left; width: 20%; }
dd { float: left; }

Answer 3

Nun, könnte man einfach dt Schwimmer lassen: links

dt { float: left; }

oder auch dt Anzeige inline lassen:

dt { display: inline; }

Answer 4

Sie müssen den Standard linken Rand vom dd entfernen.

dt {float:left;clear:left;margin-right:5px;}
dd {margin:0;}

Answer 5

Ich denke, diese (uncomment erste Linie zum Test für kleine Breite):

dl, dd, dt { margin: 0; }
/*dl { width: 80px; }*/
dl dt, dl dd { display: inline; }
dl dd:after { content: ' '; padding-left: 100%; }