Definitionsliste mit Inline-Paaren

Question

Ich versuche, eine Definitionsliste von Begriff-Definition-Paaren zu erstellen, wobei jedes Paar in einer einzelnen, separaten Zeile vorhanden ist. Ich habe versucht, dt s und dd s display:inline machen, aber dann verliere ich die Zeilenumbrüche zwischen den Paaren. Wie stelle ich sicher, dass ich für jedes Paar eine Zeile habe (und nicht für jeden einzelnen Begriff)?

Beispiel:

<dl> 
<dt>Term 1</dt><dd>Def 1</dd> 
<dt>Term 2</dt><dd>Def 2</dd> 
</dl> 

wodurch man

Term 1 Def 1 
Term 2 Def 2 

Die CSS sie inline zur Herstellung wäre:

dt,dd{display:inline;} 

wodurch man

Term 1 Def 1 Term 2 Def 2 

... was ich nicht will (Zeilenumbrüche zwischen Paaren fehlen).

Answer 1

Try this:

dt, dd { float: left } 
dt { clear:both } 

hinzufügen margin-bottom zu dt dd wenn Sie mehr Platz zwischen ihnen möchten ..

Answer 2

Eine andere Lösung:

dt:before { 
    content: ""; 
    display: block; 
} 
dt, dd { 
    display: inline; 
} 

Answer 3

Eine andere Lösung ist die Verwendung Inline-Block- und Prozentbreiten. Solange die kombinierte Breite von dd + dt größer als 50% ist.

Ich fand dies gab mir eine konsistentere Positionierung der dd-Elemente.

Answer 4

Wenn Sie einen „Zebra“ backgronund oder Grenze haben trennt jedes DT-DD Paar, dann wird dies gut funktionieren:

dt, dd { padding: 8px 6px; display: block;

} 
dt { 
    font-weight: 600; 
    float: left; 
    min-width: 50%; 
    margin: 0 8px 0 0; 
} 
dd:nth-of-type(odd) { 
    background: #eee; 
} 

Dies erscheint beiden Elemente in einer Reihe mit einem grauen Hintergrund wickeln . Solange der DT weniger vertikale Höhe als der DD hat - was normalerweise der Fall ist.

• Noch kein Browser getestet.

Answer 5

Ich habe diese Antworten versucht, schließlich habe ich am Ende this.

Was ich vereinfacht:

dl {  
    padding: 0.5em; 
    } 
    dt { 
    float: left; 
    clear: left; 
    width: 100px; 
    text-align: right; 
    font-weight: bold;  
    } 
    dt:after { 
    content: ":"; 
    } 
    dd { 
    margin: 0 0 0 110px;   
    } 

Answer 6

Eine weitere einfache Lösung

dt { 
    display: block; 
    float: left; 
    min-width: 100px; 
} 

https://jsbin.com/vumeyowana/edit?html,css,output

Answer 7

Andrey Fedoseev Antwort funktioniert nicht in alten android (Lager-Browser 4.3).Diese

funktioniert für diesen Browser und alle anderen, die ich habe überprüft:

dt::before { 
 
    content: "\A"; 
 
    white-space: pre-wrap; 
 
    display: block; 
 
    height: .5em; 
 
} 
 

 
dt, dd { 
 
    display: inline; 
 
    margin: 0; 
 
}

<dl> 
 
    <dt>AM</dt> 
 
    <dd>Description for am that should span more than one line at narrow screen widths.</dd> 
 
    <dt>PM</dt> 
 
    <dd>this means afternoon.</dd> 
 
</dl>