Question

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

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

问题是我无法将列表移到<h2>列表标题下。这是清单：

<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时，元素将从文档流中取出。因此，无论<ul>位于何处，您的<h2>现在都会成为流程中的最顶层元素。

要在<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;
}

列出清单

1 个答案: