Wie man semantische HTML horizontale Definitionsliste mit automatischer Breite macht?

Question

Semantic Inline-Definitionsliste in html:

<dl> 
 
    <dt>Item 1</dt> 
 
    <dd>def. 1</dd> 
 
    <dt>Item 2</dt> 
 
    <dd>def. 2</dd> 
 
</dl>

Wie dies nur mit CSS in 2 Spalten machen (keine js) und Auto-Breite jeder Spalte?

Einfach mit fester Breite oder Prozent Breite, aber ich habe keine Lösung mit automatischer Breite gefunden.

(habe ich versucht, Flexbox und multicolumns)

Jede Idee?

Dank

Answer 1

So habe ich eine Lösung, die eine flexbox, aber ich glaube nicht, dass Sie ohne Angabe Hälfte Breiten viel tun können.

*{ 
 
    box-sizing: border-box; 
 
} 
 
dl { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
dl dt, 
 
dl dd { 
 
    width: 50%; 
 
    margin: 0; 
 
    border: 1px solid red; 
 
}

<dl> 
 
    <dt>Item 1</dt> 
 
    <dd>def. 1</dd> 
 
    <dt>Item 2</dt> 
 
    <dd>def. 2</dd> 
 
</dl>

Hinweise:

1. Ich verwende Flex-Wrapping das Layout mit jedem Element in halber Breite des Bildschirms zu erreichen.

2. dd hat einen Standard-Margin-Wert, den Sie mit margin: 0 zurücksetzen sollten.

Bitte lassen Sie mich Ihre Rückmeldung hierüber wissen. Vielen Dank!

EDIT:

*{ 
 
    box-sizing: border-box; 
 
} 
 
dl { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
dl dt, 
 
dl dd { 
 
    width: 50%; 
 
    margin: 0; 
 
    border: 1px solid red; 
 
} 
 

 
dl dt ~ dd + dd { 
 
    margin-left: 50%; 
 
}

<dl> 
 
    <dt>Item 1</dt> 
 
    <dd>def. 1</dd> 
 
    <dd>def. 1</dd> 
 
    <dd>def. 1</dd> 
 
    <dt>Item 2</dt> 
 
    <dd>def. 2</dd> 
 
    <dd>def. 2</dd> 
 
</dl>

Answer 2

eine tödliche einfache Lösung (semantische, voll arbeitenden, nicht:

Wenn Sie mehr dd s haben, dann können Sie diese verwenden javascript):

dl.horizontal-definition-list { 
 
    display: table; 
 
    min-width: 400px; 
 
} 
 

 
.horizontal-definition-list dt, .horizontal-definition-list dd { 
 
    padding: 2% 10%; 
 
} 
 

 
.horizontal-definition-list dt { 
 
    display: table-cell; 
 
    text-align: right; 
 
    white-space: nowrap; 
 
    font-weight: 600; 
 
    background: gold; 
 
} 
 

 
.horizontal-definition-list dd { 
 
    display: table-cell; 
 
    background: silver; 
 
} 
 

 
.horizontal-definition-list dd.line-break { 
 
    display: table-row; 
 
}

<dl class="horizontal-definition-list"> 
 
    <dt>Term 1</dt> 
 
    <dd>definition 1</dd> 
 
    <dd class="line-break"></dd> 
 
    <dt>Term 2</dt> 
 
    <dd>definition 2</dd> 
 
    <dd class="line-break"></dd> 
 
    <dt>Term 3</dt> 
 
    <dd>definition 3<br>(multiline, no problem)</dd> 
 
    <dd class="line-break"></dd> 
 
    <dt>Term 4</dt> 
 
    <dd class="red-text">definition 4</dd> 
 
</dl>