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;，幻灯片显示超出了＆＃39;页面流程＆＃39;。弥补这一点的简单方法是这样的：

ul.ppt {
height: 300px;
}

幻灯片放映未正确锚定

1 个答案: