如何用自动宽度制作语义html水平定义列表？

Question

语义内嵌定义列表中的HTML：

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

如何使这个只使用CSS（无JS）和自动调宽每列2列？

使用固定宽度或百分比宽度很容易，但我没有找到自动宽度的解决方案。

（我试过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. 我使用柔性包装以实现与在屏幕的一半宽度的每个元素的布局。

2. dd有一个默认的边距值，您应该使用margin: 0来重置。

请让我知道您对此的反馈。谢谢！

编辑：

如果您有多个dd S，那么你可以使用这个：

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