CSS: <DL> intervallato/margine tra i dt/coppie dd

Question

ho la seguente html:

<dl> 
     <dt>Item 1</dt> 
     <dd> 
      <ul> 
       <li>Value 1</li> 
      </ul> 
     </dd> 
     <dt>Item 2</dt> 
     <dd> 
      <!-- this item is missing a value --> 
     </dd> 
     <dt>Item 3</dt> 
     <dd> 
      <ul> 
       <li>Value 1</li> 
       <li>Value 2</li> 
       <li>Value 3</li> 
      </ul> 
     </dd> 
    </dl> 

Vorrei stenderlo come (invece del dl normale che mette il termine e definizioni sotto a vicenda):

Item 1 Value 1 
Item 2  
Item 3 Value 1 
      Value 2 
      Value 3 

Quale non è un problema. Il problema è che vorrei aggiungere un margine tra ogni termine/coppia di definizioni. Il problema è che le definizioni non hanno la stessa altezza (vanno da 0 a 5 voci di elenco), quindi non posso applicare lo stesso margine sui tag dd.

Answer 1

Come va?

dt, dd { display: block; float: left; margin-top: 20px; } 
dt { clear: both; } 

Answer 2

vuoi dire qualcosa come:

Item 1 Value 1 

Item 2  

Item 3 Value 1 
      Value 2 
      Value 3 

Perché allora non vedo il motivo per cui non è possibile applicare il margine sugli elementi dd. Ho fatto un rapido esperimento utilizzando il seguente CSS:

ul { 
    margin: -1.2em 0 0 100px; 
    padding: 0; 
} 

dd { 
    margin-bottom: 10px; 
} 

Quale sembra avere l'effetto necessario.

Answer 3

Il tuo 'elemento 2' è veramente vuoto o ha un   in esso? Se è vuoto, sarà difficile ottenere il dt/dd per allineare correttamente perché gli altri dd avranno un'altezza di 20px (per esempio) e il dd vuoto avrà un'altezza di 0.

Attenzione con il margine superiore, dovrai applicarlo sia a dt che a dd.

Preferisco utilizzare il riempimento nella parte inferiore del dd. Dà risultati più coerenti.

dt { 
    float: left; 
    clear: left; 
    width: 8em; 
    } 
dd { 
    margin: 0 0 0 9em; 
    padding: 0 0 2.5em 0; 
    } 

Answer 4

penso che l'uso corretto di dl, dt e dd non utilizza ulli 's all'interno di un dd, ma invece utilizzare diversi dd' s. Mi sembra che tu stia usando una lista all'interno di un elemento che è esso stesso per la quotazione.

<dl> 
    <dt>Item 1</dt> 
    <dd>Value 1</dd> 
    <dt>Item 2</dt> 
    <dd> 
     &nbsp; 
    </dd> 
    <dt>Item 3</dt> 
    <dd>Value 1</dd> 
    <dd>Value 2</dd> 
    <dd>Value 3</dd> 
</dl> 

per i CSS è possibile utilizzare questo:

DL { 
PADDING: 0; MARGIN: 0; } 
DT { 
POSITION: relative; PADDING: 0; MARGIN: 0; TOP: 1.2em; LEFT: 0px; } 
DD { 
PADDING: 0; MARGIN: 0 0 0 5em; }