Html 在QuartoDiscrealjs演示文稿中只增加一个列表的填充

发布于01月24日

我刚刚开始学习如何使用quarto/revealjs来准备演示文稿，我想知道如何定义一个.css文件来修改列表元素之间的填充，但只针对一个列表(而不是整个qmd文档).

例如，我知道如果我考虑下面的css文本

.reveal li {
  padding: 25px; 
}

将其保存在style.css文件中，并将其包含在下面的qmd文档中

---
format: 
  revealjs: 
    css: style.css
---

## Bullets

Increase padding for the elements of this list

- A
- B

but not for this list

- C
- D

然后，我可以增加整个文档的列表项之间的间距:

然而，我只想修改一份 list .这有可能吗？

推荐答案

我们可以创建一个extrapad类，为除最后一个列表项之外的每个列表项设置margin-bottom.我们可以添加!important覆盖以确保它适用，而不是默认的reveal.js css列表规则.

.extrapad li:not(:last-child) {
    margin-bottom:60px  !important;
}

然后使用Pandocfenced div notation将其应用于您的QMD文件中的相关列表:

---
format: 
  revealjs: 
    css: styles.css
---

## Bullets

Increase padding for the elements of this list

:::{.extrapad}
- A 
- Lorem ipsum dolor sit amet, class maecenas eros dictum enim pharetra curabitur, sed sed. Morbi et, accumsan
- B
:::

but not for this list

- C
- D

输出: