定位列表

Question

我有一个列表需要放在幻灯片上。使用 css，我已将 list-title <h2> 移动到我想要的位置：

.reveal h2 {
  position: absolute;
  top: 200px;
  left: 240px;
}

问题是我无法将列表移动到 <h2> list-title 下。这是列表：

<section id="layout-example" class="slide level1">
<h1>Layout Example</h1>
<h2>
List title
</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</section>

我试过.reveal ul {top: 220px...等等，但列表总是在相同的（错误的）位置。

我应该在css的什么地方添加什么命令？我通过复制 reveal.js.

中包含的示例之一制作了自己的 css

Answer 1

当您使用 position: absolute 时，元素会从文档流中取出。因此，无论 <h2> 在哪里，您的 <ul> 现在都在 "becomes the top-most element" 中。

要使 <ul> 在 <h2> 之后流动，请不要使用绝对定位。使用：

h2 {
    padding-top: 200px;
    padding-left: 240px;
}
ul {
    padding-left: 240px; /* assuming you want them to align left */
}

这确保您的 <ul> 遵循您的 <h2>。

或者，IF*你必须使用绝对定位，也使<ul>绝对定位，例如：

ul {
    position: absolute;
    top: 250px; /* adjust as required */
    left: 240px;
}

定位列表

Position a list

html

css

reveal.js