css 不推荐使用的替代方案，< dl compact>

mwecs4sa 于 12个月前发布在其他

关注(0)|答案(4)|浏览(150)

从Internet Explorer中，我深情地记得可以使用以下代码创建紧凑的定义列表，

<dl compact>
    <dt>f</dt>
        <dd>Firefox</dd>
    <dt>i</dt>
        <dd>Internet Explorer</dd>
</dl>

字符串
结果是这样的：
x1c 0d1x的数据
但遗憾的是，目前似乎没有浏览器支持此功能; MDN甚至没有将该元素列为已弃用。
Firefox在术语下面显示了定义细节：

的
我试着这样使用CSS：

dl>dd {
    margin-top: -1em;
}

型
它几乎可以工作，但术语和细节并没有很好地对齐：

的
有没有一种CSS（或其他）解决方案可以更接近Internet Explorer <dl compact>，而不依赖于摆弄有趣的margin-top值？

css

来源：https://stackoverflow.com/questions/77380707/non-deprecated-alternatives-for-dl-compact

4条答案

按热度按时间

klsxnrf11#

另一种样式化紧凑描述列表的方法是使用CSS Grid，将术语和描述放置在各自的列中。它甚至适用于包含多个描述的术语的列表。

dl.compact {
  display: grid;
  grid-template: auto / auto auto;
  width: fit-content;
  column-gap: 1em;
}
dl.compact dt {
  grid-column-start: 1;
}
dl.compact dd {
  grid-column-start: 2;
  margin: 0;
}

个字符

赞(0）回复(0）举报 12个月前

kyks70gy2#

我想你会想把它们从block改为inline。

dl[compact] dt,
dl[compact] dd {
  display: inline;
}

/* this makes the break between items */

dl[compact] dt:before {
  content: ' ';
  display: block;
}

个字符

赞(0）回复(0）举报 12个月前

yizd12fk3#

另一种方法是使用网格。

dd {
  margin: 0;
}

dl {
  column-gap: 1rem;
  display: inline-grid;
  grid-template-columns: auto auto;
  width: auto;
}

个字符

赞(0）回复(0）举报 12个月前

tcomlyy64#

这是一个基于浮动的答案。
它甚至支持多个<dt>元素后跟一个<dd>，支持一个<dt>后跟多个<dt>元素。
如果同一行上的<dt>和<dd>之间的空间小于1 em，它将进行换行符。
我不能保证它在任何情况下都能正常工作，但它们至少嵌套了一层，我还在默认的box-sizing和box-sizing: border-box中测试了这一点。

dl[compact] dt {
    clear: both;
    float: left;
}
dl[compact] dd {
    float: right;
    width: calc(100% - 40px);
    margin-left: 1em;
}
dl[compact]::after {
    content: '';
    clear: both;
    display: block;
}

个字符

赞(0）回复(0）举报 12个月前

我来回答

css 不推荐使用的替代方案，< dl compact>

4条答案

相关问题

热门标签

最新问答