Come modellare dt e dd in modo che siano sulla stessa linea?

Utilizzando i CSS, come posso modellare quanto segue:

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

quindi il contenuto dello dtspettacolo in una colonna e il contenuto di ddin un'altra colonna, con ciascuno dte il corrispondente ddsulla stessa riga? Vale a dire produrre qualcosa che assomiglia a:

Ho una soluzione senza usare i float!
controlla questo su codepen

Cioè.

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

Aggiornamento - 3 ^° Gennaio 2017: soluzione a base ho aggiunto flex-box per il problema. Verificare che nel codice collegato e perfezionarlo secondo le esigenze. Grazie!

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

Layout griglia CSS

Come le tabelle, il layout della griglia consente all'autore di allineare gli elementi in colonne e righe.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Per modificare le dimensioni della colonna, dai un'occhiata alla grid-template-columnsproprietà.

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>

Se usi Bootstrap 3 (o precedente) ...

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

Supponendo di conoscere l'ampiezza del margine:

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

Poiché devo ancora vedere un esempio che funziona per il mio caso d'uso, ecco la soluzione più completa che sono stato in grado di realizzare.

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

Stranamente, non funziona display: inline-block. Suppongo che se è necessario impostare la dimensione di uno degli dtelementi o ddelementi, è possibile impostare la dl'visualizzazione s come display: flexbox; display: -webkit-flex; display: flex;e l' flexabbreviazione degli ddelementi e gli dtelementi come qualcosa di simile flex: 1 1 50%e displaycome display: inline-block. Ma non l'ho provato, quindi avvicinati con cautela.

Guarda la demo di jsFiddle

Avevo bisogno di un elenco esattamente come descritto per un progetto che mostrava i dipendenti di un'azienda, con la loro foto a sinistra e le informazioni a destra. Sono riuscito a completare la radura usando psuedo-elementi dopo ogni DD:

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

Inoltre, volevo che il testo venisse visualizzato solo a destra dell'immagine, senza avvolgerlo sotto l'immagine fluttuata (effetto pseudo-colonna). Ciò può essere ottenuto aggiungendo un DIVelemento con CSS overflow: hidden;attorno al contenuto del DDtag. Puoi omettere questo extra DIV, ma il contenuto del DDtag andrà a capo sotto il float DT.

Dopo averci giocato un po ', sono stato in grado di supportare più DTelementi per DD, ma non più DDelementi per DT. Ho provato ad aggiungere un'altra classe opzionale per cancellare solo dopo l'ultimo DD, ma gli DDelementi successivi sono stati racchiusi sotto gli DTelementi (non il mio effetto desiderato ... Volevo che gli elementi DTe DDformassero colonne e gli DDelementi extra fossero troppo larghi).

A tutti i diritti, questo dovrebbe funzionare solo in IE8 +, ma a causa di una stranezza in IE7 funziona anche lì.

Ecco un'altra opzione che funziona visualizzando dt e dd inline e quindi aggiungendo un'interruzione di riga dopo dd.

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

Questo è simile alla soluzione di Navaneeth sopra, ma usando questo approccio, il contenuto non si allinea come in una tabella, ma il dd seguirà immediatamente il dt su ogni riga indipendentemente dalla lunghezza.

Devo farlo e avere il <dt>contenuto centrato verticalmente, rispetto al <dd>contenuto. Ho usato display: inline-block, insieme avertical-align: middle

Vedi l'esempio completo su Codepen qui

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

A seconda di come modifichi gli elementi dt e dd, potresti riscontrare un problema: farli avere la stessa altezza. Ad esempio, se si desidera ma un bordo visibile nella parte inferiore di quegli elementi, molto probabilmente si desidera visualizzare il bordo alla stessa altezza, come in una tabella.

Una soluzione per questo è barare e rendere ogni riga un elemento "dl". (Questo equivale all'utilizzo di tr in una tabella) Perdiamo l'interesse originale degli elenchi di definizioni, ma alla controparte questo è un modo semplice per ottenere pseudo-tabelle che sono rapidamente e piuttosto in stile.

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

L'HTML:

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

Ho trovato una soluzione che mi sembra perfetta, ma ha bisogno di <div>tag extra . Si scopre che non è necessario usare il <table>tag per allinearlo come in una tabella, è sufficiente usare display:table-row;e gli display:table-cell;stili:

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

Di recente ho dovuto mescolare coppie dt / dd inline e non inline, specificando la classe dl-inlinesugli <dt>elementi che dovrebbero essere seguiti da <dd>elementi inline .

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

>

Funziona su IE7 +, è conforme agli standard e consente altezze diverse.

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

Vedi il JSFiddle .

questo funziona per visualizzarli come tabella, con bordo, dovrebbe essere reattivo con 3em la larghezza della prima colonna. L'involucro delle parole rompe qualsiasi parola più ampia della colonna

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

Confronto di <table>con <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>

Di solito comincio con quanto segue quando definisco gli elenchi di definizioni come tabelle:

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 maggior parte di ciò che la gente suggerisce qui funziona, tuttavia dovresti solo inserire il codice generico nel foglio di stile e inserire il codice specifico nel codice html come mostrato di seguito. Altrimenti finirai con un foglio di stile gonfio.

Ecco come lo faccio:

Il tuo codice del foglio di stile:

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

Il tuo codice 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>

Somiglia a questo