Comment styliser dt et dd pour qu'ils soient sur la même ligne?

En utilisant CSS, comment puis-je styliser les éléments suivants:

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

donc le contenu de l' dtémission dans une colonne et le contenu de dddans une autre colonne, avec chacun dtet le correspondant ddsur la même ligne? C'est-à-dire produire quelque chose qui ressemble à:

J'ai une solution sans utiliser de flotteurs!
vérifier cela sur codepen

Viz.

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

Mise à jour - 3 ^ème janvier 2017: J'ai ajouté solution boîte flex pour le problème. Vérifiez que dans le codepen lié et affinez-le selon les besoins. Merci!

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

Disposition de la grille CSS

Comme les tableaux, la disposition de la grille permet à un auteur d'aligner des éléments dans des colonnes et des lignes.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Pour modifier la taille des colonnes, jetez un œil à la grid-template-columnspropriété.

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>

Si vous utilisez Bootstrap 3 (ou une version antérieure) ...

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

En supposant que vous connaissez la largeur de la marge:

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

Parce que je n'ai pas encore vu d'exemple qui fonctionne pour mon cas d'utilisation, voici la solution la plus complète que j'ai pu réaliser.

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="#">[email protected]</a></dd>
  <dt>Postal Address</dt>
  <dd><div class="address">123 FAKE ST<br />EXAMPLE EX  00000</div></dd>
</dl>

Text

Curieusement, cela ne fonctionne pas avec display: inline-block. Je suppose que si vous avez besoin de définir la taille de l'un des dtéléments ou des ddéléments, vous pouvez définir l' dlaffichage de display: flexbox; display: -webkit-flex; display: flex;et la flexsténographie de ladd éléments et les dtéléments comme quelque chose comme flex: 1 1 50%et displaycomme display: inline-block. Mais je n'ai pas testé cela, alors approchez avec prudence.

Voir démo jsFiddle

J'avais besoin d'une liste exactement telle que décrite pour un projet qui montrait des employés d'une entreprise, avec leur photo à gauche et des informations à droite. J'ai réussi à effacer en utilisant des éléments pseudo-après chaque DD:

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

De plus, je souhaitais que le texte ne s'affiche qu'à droite de l'image, sans passer sous l'image flottante (effet pseudo-colonne). Cela peut être accompli en ajoutant un DIVélément avec le CSS overflow: hidden;autour du contenu de la DDbalise. Vous pouvez omettre cet extra DIV, mais le contenu de la DDbalise passera sous le flottant DT.

Après avoir joué avec, j'ai pu prendre en charge plusieurs DTéléments par DD, mais pas plusieurs DDéléments par DT. J'ai essayé d'ajouter une autre classe facultative pour effacer seulement après la dernière DD, mais les DDéléments suivants ont été enveloppés sous les DTéléments (pas l'effet souhaité… je voulais que les éléments DTet DDforment des colonnes, et les DDéléments supplémentaires étaient trop larges).

Par tous les droits, cela ne devrait fonctionner que dans IE8 +, mais en raison d'une bizarrerie dans IE7, cela fonctionne également là-bas.

Voici une autre option qui fonctionne en affichant les dt et dd en ligne puis en ajoutant un saut de ligne après le dd.

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

Ceci est similaire à la solution de Navaneeth ci-dessus, mais en utilisant cette approche, le contenu ne s'alignera pas comme dans un tableau, mais le dd suivra le dt immédiatement sur chaque ligne quelle que soit sa longueur.

Je dois le faire et avoir le <dt>contenu centré verticalement, par rapport au <dd>contenu. J'ai utilisé display: inline-block, avecvertical-align: middle

Voir l'exemple complet sur Codepen ici

.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;
  } 
}

Selon la façon dont vous stylisez les éléments dt et dd, vous pouvez rencontrer un problème: les faire avoir la même hauteur. Par exemple, si vous voulez mais une bordure visible au bas de ces éléments, vous voulez très probablement afficher la bordure à la même hauteur, comme dans un tableau.

Une solution consiste à tricher et à faire de chaque ligne un élément "dl". (cela équivaut à utiliser tr dans un tableau) Nous perdons l'intérêt initial des listes de définitions, mais sur le pendant, c'est un moyen facile d'obtenir des pseudo-tableaux qui sont rapidement et assez stylisés.

LE 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;}

LE HTML:

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

J'ai trouvé une solution qui me semble parfaite, mais elle nécessite des <div>balises supplémentaires . Il s'avère qu'il n'est pas nécessaire d'utiliser des <table>balises pour s'aligner comme dans un tableau, il suffit d'utiliser display:table-row;et de display:table-cell;styles:

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

J'ai récemment eu besoin de mélanger des paires dt / dd en ligne et non en ligne, en spécifiant la classe dl-inlinesur les <dt>éléments qui devraient être suivis par les <dd>éléments en ligne .

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

>

Cela fonctionne sur IE7 +, est conforme aux normes et permet différentes hauteurs.

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

Voir le JSFiddle .

cela fonctionne pour les afficher sous forme de tableau, avec bordure, il doit être réactif avec 3em de la largeur de la première colonne. Le retour à la ligne casse juste les mots plus larges que la colonne

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

Comparaison <table>avec <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>

Je commence généralement par ce qui suit lorsque je stylise les listes de définitions sous forme de tableaux:

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 */
}

La plupart de ce que les gens suggèrent ici fonctionne, mais vous ne devez placer que du code générique dans la feuille de style et placer le code spécifique dans le code html comme indiqué ci-dessous. Sinon, vous vous retrouverez avec une feuille de style gonflée.

Voici comment je le fais:

Votre code de feuille de style:

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

Votre code html:

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

Ressemble à ça