html - 幻灯片未正确锚定

Question

我使用在网上找到的脚本在我的网页中插入了幻灯片。但是，我之后添加的任何文本都会显示在该列第一行的图像后面。我希望我的按钮直接位于下方，就好像图像是它自己的线一样。

代码如下:

<ul class="ppt">
<li><img src="banner2.jpg" width="600" height="300" alt="2"></img></li>
<li><img src="banner3.jpg" width="600" height="300" alt="3"></img></li>
<li><img src="banner4.jpg" width="600" height="300" alt="4"></img></li>
</ul>


<div align="center">
<button type="button" style="width:200; height:20; font-size: 8px; font:bold; color:#FFF; background-color:#666"  id="back"> << </button>
<button type="button" style="width:100; height:20; font-size: 8px; font:bold; color:#FFF; background-color:#666" id="stop">| |</button>
<button type="button" style="width:100; height:20; font-size: 8px; font:bold; color:#FFF; background-color:#666" id="play"> > </button>
<button type="button" style="width:200; height:20; font-size: 8px; font:bold; color:#FFF; background-color:#666"  id="fwd"> >> </button>
</div>

这是图像的 CSS:

ul.ppt {
position: relative;
}

.ppt li {
list-style-type: none;
position: absolute;
top: 0;
left: 100;
}

.ppt img {

border: 0;
padding: 0;
background-color: #ececec;
}

这是网页:

www.cooswatershed.org/newhome2

Answer 1

由于 position: absolute;，幻灯片不在“页面流”中。弥补这一点的一个简单方法是这样的:

ul.ppt {
height: 300px;
}