Как сделать семантический html список определения горизонтали с автоматической шириной?

Question

список Семантический рядный определение в HTML:

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

Как это делают в 2 колонки с использованием только CSS (без JS) и автоматическое ширину каждого столбца?

Простота использования фиксированной или процентной ширины, но я не нашел решения с автоматической шириной.

(я попробовал Flexbox и multicolumns)

Любая идея?

Благодаря

Answer 1

Так у меня есть решение, используя flexbox, но я не думаю, что вы можете сделать много без указания половины ширины.

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

Примечание:

1. Я использую Flex-обертку для достижения макета с каждым элементом на половине ширины экрана.

2. dd имеет значение по умолчанию, которое вы должны сбросить с помощью margin: 0.

Пожалуйста, дайте мне знать ваши отзывы об этом. Благодаря!

EDIT:

Если у вас есть несколько dd с, то вы можете использовать это:

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

смертельное простое решение (семантический, полностью работу, нет 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>