Wie kann man dt und dd so stylen, dass sie sich in derselben Zeile befinden?

Wie kann ich mit CSS Folgendes formatieren:

<dl>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
    <dt>Venus</dt>
    <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
    <dt>Earth</dt>
    <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

Also der Inhalt der dtShow in einer Spalte und der Inhalt der ddin einer anderen Spalte, wobei jeder dtund der entsprechende ddin derselben Zeile steht? Dh etwas produzieren, das aussieht wie:

Ich habe eine Lösung ohne Schwimmer!
Überprüfen Sie dies auf Codepen

Nämlich.

dl.inline dd {
  display: inline;
  margin: 0;
}
dl.inline dd:after{
  display: block;
  content: '';
}
dl.inline dt{
  display: inline-block;
  min-width: 100px;
}

Update - 3 ^rd Januar 2017: Ich habe hinzugefügt Flex-Box - basierte Lösung für das Problem. Überprüfen Sie dies im verknüpften Codepen und verfeinern Sie ihn nach Bedarf. Vielen Dank!

dl.inline-flex {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 300px;      /* set the container width*/
  overflow: visible;
}
dl.inline-flex dt {
  flex: 0 0 50%;
  text-overflow: ellipsis;
  overflow: hidden;
}
dl.inline-flex dd {
  flex:0 0 50%;
  margin-left: auto;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
}

CSS-Rasterlayout

Wie bei Tabellen ermöglicht das Rasterlayout einem Autor, Elemente in Spalten und Zeilen auszurichten.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Schauen Sie sich die grid-template-columnsEigenschaft an , um die Spaltengrößen zu ändern .

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

<dl>
  <dt>Mercury</dt>
  <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  <dt>Venus</dt>
  <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  <dt>Earth</dt>
  <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

Wenn Sie Bootstrap 3 (oder früher) verwenden ...

<dl class="dl-horizontal">
    <dt>Label:</dt>
    <dd>
      Description of planet
    </dd>
    <dt>Label2:</dt>
    <dd>
      Description of planet
    </dd>
</dl>

Angenommen, Sie kennen die Breite des Randes:

dt { float: left; width: 100px; }
dd { margin-left: 100px; }

Da ich noch kein Beispiel für meinen Anwendungsfall gesehen habe, ist hier die vollständigste Lösung, die ich realisieren konnte.

dd {
    margin: 0;
}
dd::after {
    content: '\A';
    white-space: pre-line;
}
dd:last-of-type::after {
    content: '';
}
dd, dt {
    display: inline;
}
dd, dt, .address {
    vertical-align: middle;
}
dt {
    font-weight: bolder;
}
dt::after {
    content: ': ';
}
.address {
    display: inline-block;
    white-space: pre;
}

Surrounding

<dl>
  <dt>Phone Number</dt>
  <dd>+1 (800) 555-1234</dd>
  <dt>Email Address</dt>
  <dd><a href="#">example@example.com</a></dd>
  <dt>Postal Address</dt>
  <dd><div class="address">123 FAKE ST<br />EXAMPLE EX  00000</div></dd>
</dl>

Text

Seltsamerweise funktioniert es nicht mit display: inline-block. Ich nehme an, wenn Sie die Größe eines der dtElemente oder ddElemente festlegen müssen, können Sie die dlAnzeige des display: flexbox; display: -webkit-flex; display: flex;und als und die flexKurzform der ddElemente und der dtElemente als etwas wie flex: 1 1 50%und displayals festlegen display: inline-block. Aber ich habe das nicht getestet, also gehe vorsichtig vor.

Siehe jsFiddle-Demo

Ich brauchte eine Liste genau wie beschrieben für ein Projekt, das Mitarbeiter eines Unternehmens mit ihrem Foto links und Informationen rechts zeigte. Ich habe es geschafft, das Clearing mit Pseudo-Elementen nach jedem zu erreichen DD:

.myList dd:after {
  content: '';
  display: table;
  clear: both;
}

Außerdem wollte ich, dass der Text nur rechts vom Bild angezeigt wird, ohne unter das schwebende Bild zu wickeln (Pseudo-Spalten-Effekt). Dies kann erreicht werden, indem ein DIVElement mit dem CSS overflow: hidden;um den Inhalt des DDTags hinzugefügt wird . Sie können dieses Extra weglassen DIV, aber der Inhalt des DDTags wird unter dem Float eingeschlossen DT.

Nachdem ich eine Weile damit gespielt hatte, konnte ich mehrere DTElemente pro DD, aber nicht mehrere DDElemente pro unterstützen DT. Ich habe versucht, eine weitere optionale Klasse hinzuzufügen, um sie erst nach dem letzten DD, aber nachfolgenden DDElement zu löschen , das unter den DTElementen eingeschlossen ist (nicht mein gewünschter Effekt… Ich wollte, dass die DTund DD-Elemente Spalten bilden und die zusätzlichen DDElemente zu breit sind).

Dies sollte auf jeden Fall nur in IE8 + funktionieren, aber aufgrund einer Eigenart in IE7 funktioniert es auch dort.

Hier ist eine weitere Option, bei der dt und dd inline angezeigt und nach dd ein Zeilenumbruch hinzugefügt wird.

dt, dd {
 display: inline;
}
dd:after {
 content:"\a";
 white-space: pre;
}

Dies ähnelt der obigen Navaneeth-Lösung, aber bei diesem Ansatz wird der Inhalt nicht wie in einer Tabelle ausgerichtet, sondern der dd folgt dem dt in jeder Zeile unabhängig von der Länge sofort.

Ich muss dies tun und den <dt>Inhalt vertikal zentriert relativ zum <dd>Inhalt haben. Ich habe display: inline-blockzusammen mitvertical-align: middle

Das vollständige Beispiel zu Codepen finden Sie hier

.dl-horizontal {
  font-size: 0;
  text-align: center;

  dt, dd {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    width: calc(50% - 10px);
  }

  dt {
    text-align: right;
    padding-right: 10px;
  }

  dd {
    font-size: 18px;
    text-align: left;
    padding-left: 10px;
  } 
}

Abhängig davon, wie Sie die Elemente dt und dd formatieren, kann ein Problem auftreten: Sie müssen dieselbe Höhe haben. Wenn Sie beispielsweise einen sichtbaren Rand am unteren Rand dieser Elemente anzeigen möchten, möchten Sie den Rand höchstwahrscheinlich auf derselben Höhe wie in einer Tabelle anzeigen.

Eine Lösung hierfür ist das Betrügen und das Erstellen jeder Zeile zu einem "dl" -Element. (Dies entspricht der Verwendung von tr in einer Tabelle.) Wir verlieren das ursprüngliche Interesse an Definitionslisten, aber auf der anderen Seite ist dies eine einfache Möglichkeit, Pseudotabellen zu erhalten, die schnell und hübsch gestaltet sind.

DAS CSS:

dl {
 margin:0;
 padding:0;
 clear:both;
 overflow:hidden;
}
dt {
 margin:0;
 padding:0;
 float:left;
 width:28%;
 list-style-type:bullet;
}
dd {
 margin:0;
 padding:0;
 float:right;
 width:72%;
}

.huitCinqPts dl dt, .huitCinqPts dl dd {font-size:11.3px;}
.bord_inf_gc dl {padding-top:0.23em;padding-bottom:0.5em;border-bottom:1px solid #aaa;}

DER HTML:

<div class="huitCinqPts bord_inf_gc">
  <dl><dt>Term1</dt><dd>Definition1</dd></dl>
  <dl><dt>Term2</dt><dd>Definition2</dd></dl>
</div>

Ich habe eine Lösung gefunden, die mir perfekt erscheint, aber zusätzliche <div>Tags benötigt. Es stellt sich heraus, dass es nicht erforderlich ist, ein <table>Tag zum Ausrichten wie in einer Tabelle zu verwenden. Es reicht aus, es zu verwenden display:table-row;und zu display:table-cell;formatieren:

<style type="text/css">
dl > div {
  display: table-row;
}
dl > div > dt {
  display: table-cell;
  background: #ff0;
}
dl > div > dd {
  display: table-cell;
  padding-left: 1em;
  background: #0ff;
}
</style>

<dl>
  <div>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  </div>
  <div>
    <dt>Venus</dt>
    <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  </div>
  <div>
    <dt>Earth</dt>
    <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
  </div>
</dl>

Ich musste kürzlich Inline- und Nicht-Inline-dt / dd-Paare mischen, indem ich die Klasse dl-inlinefür <dt>Elemente spezifizierte, auf die Inline- <dd>Elemente folgen sollten .

dt.dl-inline {
  display: inline;
}
dt.dl-inline:before {
  content:"";
  display:block;
}
dt.dl-inline + dd {
  display: inline;
  margin-left: 0.5em;
  clear:right;
}

<dl>
    <dt>The first term.</dt>
    <dd>Definition of the first term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt class="dl-inline">The second term.</dt>
    <dd>Definition of the second term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt class="dl-inline">The third term.</dt>
    <dd>Definition of the third term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt>The fourth term</dt>
    <dd>Definition of the fourth term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
</dl

>

Dies funktioniert auf IE7 +, ist standardkonform und ermöglicht unterschiedliche Höhen.

<style>
dt {
    float: left;
    clear: left;
    width: 100px;        
    padding: 5px 0;
    margin:0;
}
dd {
    float: left;
    width: 200px;
    padding: 5px 0;
    margin:0;
}
.cf:after {
    content:'';
    display:table;
    clear:both;
}
</style>

<dl class="cf">
    <dt>A</dt>
    <dd>Apple</dd>
    <dt>B</dt>
    <dd>Banana<br>Bread<br>Bun</dd>
    <dt>C</dt>
    <dd>Cinnamon</dd>
</dl>        

Siehe die JSFiddle .

Dies funktioniert, um sie als Tabelle mit Rand anzuzeigen. Es sollte mit 3em der Breite der ersten Spalte reagieren. Der Zeilenumbruch unterbricht nur alle Wörter, die breiter als die Spalte sind

 dl { display:block;
      border:2px solid black;
      margin: 1em;}  
 dt { display:inline-block;
      width:3em;
      word-wrap:break-word;} 
 dd { margin-left:0;
      display:inline;
      vertical-align:top;
      line-height:1.3;} 
 dd:after { content:'';display:block; } 

Vergleich <table>mit <dl>:

<!DOCTYPE html>
<html>
<style>

dl { display:block;border:2px outset black;margin:1em; line-height:18px;}  
dt { display:inline-block;width:3em; word-wrap:break-word;} 

dd { margin-left:0; display:inline; vertical-align:top; line-height:1.3;} 
dd:after { content:'';display:block; } 


.glosstable { border:2px outset #aaaaaa;margin:1em; text-align:left}  
.glosstable, table, tbody,  tr,  td, dl, dt {font-size:100%; line-height:18px;}

.glossaz { font-size:140%;padding-left:2em;font-weight:bold;color: #00838c; } 
td.first {width: 2.5em;} 
</style>
<body>
Table<br>
<table class="glosstable">
  <tr><td class="first">Milk</td>
  <td class="glossdata">Black hot drink</td>
</tr>
  <tr><td class="first">Coffee2</td>
  <td class="glossdata">Black hot drink</td>
</tr>
  <tr><td>Warm milk</td>
  <td class="glossdata">White hot drink</td>
</tr>
</table>
DL list <br>
<dl class="glosstablep">
  <dt>Milk</dt>
  <dd class="glossdata">White cold drink</dd>
  <dt>Coffee2</dt>
  <dd class="glossdata">Black cold drink</dd>
  <dt>Warm Milk</dt>
  <dd class="glossdata">White hot drink</dd>
</dl>

</body>
</html>

Normalerweise beginne ich mit dem folgenden, wenn ich Definitionslisten als Tabellen gestalte:

dt,
dd{
    /* Override browser defaults */
    display: inline;
    margin: 0;
}

dt  {
    clear:left;
    float:left;
    line-height:1; /* Adjust this value as you see fit */
    width:33%; /* 1/3 the width of the parent. Adjust this value as you see fit */
}

dd {
    clear:right;
    float: right;
    line-height:1; /* Adjust this value as you see fit */
    width:67%; /* 2/3 the width of the parent. Adjust this value as you see fit */
}

Das meiste, was hier vorgeschlagen wurde, funktioniert. Sie sollten jedoch nur generischen Code in das Stylesheet einfügen und den spezifischen Code wie unten gezeigt in den HTML-Code einfügen. Andernfalls erhalten Sie ein aufgeblähtes Stylesheet.

So mache ich das:

Ihr Stylesheet-Code:

<style>
    dt {
        float:left;
    }
    dd {
        border-left:2px dotted #aaa;
        padding-left: 1em;
        margin: .5em;
    }   
</style>

Ihr HTML-Code:

<dl>
    <dt>1st Entity</dt>
    <dd style="margin-left: 5em;">Consumer</dd>
    <dt>2nd Entity</dt>
    <dd style="margin-left: 5em;">Merchant</dd>
    <dt>3rd Entity</dt>
    <dd style="margin-left: 5em;">Provider, or cToken direct to Merchant</dd>
    <dt>4th Entity</dt>
    <dd style="margin-left: 5em;">cToken to Provider</dd>
</dl>

Sieht aus wie das