粘性定义列表

前几天我偶然发现了这个 30 秒代码 网站，他们的 CSS 部分非常棒！ 我查看的第一个示例代码段是这个 “浮动部分标题” 示例，再次提醒我定义列表可以是多么的 令人满意。 列表

使用这样的简单 HTML

<div class="floating-stack">
  <dl>
    <dt>A</dt>
    <dd>Algeria</dd>
    <dd>Angola</dd>

    <dt>B</dt>
    <dd>Benin</dd>
    <dd>Botswana</dd>
    <dd>Burkina Faso</dd>
    <dd>Burundi</dd>

    <dt>C</dt>
    <dd>Cabo Verde</dd>
    <dd>Cameroon</dd>
    <dd>Central African Republic</dd>
    <dd>Chad</dd>
    <dd>Comoros</dd>
    <dd>Congo, Democratic Republic of the</dd>
    <dd>Congo, Republic of the</dd>
    <dd>Cote d'Ivoire</dd>

    <dt>D</dt>
    <dd>Djibouti</dd>

    <dt>E</dt>
    <dd>Egypt</dd>
    <dd>Equatorial Guinea</dd>
    <dd>Eritrea</dd>
    <dd>Eswatini (formerly Swaziland)</dd>
    <dd>Ethiopia</dd>
  </dl>
</div>

默认的浏览器样式 - 没有 CSS - 看起来像这样

因此，所有这些 <dt> 在这种情况下，恰好巧妙地缩进到左边，位于 <dd> 的 margin-inline-start 留出的空间内。 这意味着，我们只需使用很少的 CSS 就可以开启“粘性部分”的概念。

dt {
  position: sticky;
  top: 0;
  background: white;
  display: inline-block;
}

我喜欢它的简洁性。

现在，核心“功能”已经正常工作，其余的样式只是审美上的修饰

30 秒代码上的版本 使用 CSS 网格布局来创建列表项，这无疑更加健壮。 我只是觉得，在没有使用 CSS 网格布局的情况下，你就能如此接近目标，这很有趣。 他们还提供了一个 版本，其中 <dt> 延伸至整个宽度，也很不错。