0

我在实现 serialscroll 时遇到了一个可怕的问题。我已将其设置为每个列表项都是 100% 宽度，以进行全屏幻灯片放映。

你可以在这里查看完整的代码：http ://www.reverenddan.net/so/

CSS 相当简单：

#slideshow {
width: 100%;
height:100%;
margin: 0;
padding: 0;
position:absolute;
overflow:hidden;
}

#slideshow ul {
width: 800%;
height:100%;
margin: 0;
padding:0;
}

#slideshow li {
width:12.5%;
height:100%;
margin: 0;
padding: 0;
float:left;
list-style: none;
}

和相应的 HTML：

<div id="slideshow">
                <ul>
                    <li id="slide1"><img class="centered" src="img/beetle.png" width="344" height="380" /></li>
                    <li id="slide2"><img class="centered" src="img/beetle.png" width="344" height="380" /></li>
                    <li id="slide3"><img class="centered" src="img/beetle.png" width="344" height="380" /></li>
                </ul>
            </div>

这一切都是一种享受，但是如果您在第二帧或第三帧调整窗口大小，则包含图像的列表项似乎以与浏览器窗口不同的速率调整大小，而不是保持居中。我使用了一些 jquery 来垂直对齐图像，但我认为 text-align: center 和 100% 宽度足以将它们保持在适当的位置。

任何想法将不胜感激，我已经走到了尽头！

4

1 回答 1

1

尝试更改#slideshow 以使用固定宽度、相对定位和自动左右边距，这应该具有居中的效果（及其内容）：

#slideshow{
  position: relative;
  height: 100%;
  width: 900px;
  margin: 0 auto;
  padding: 0;
  overflow:hidden;
}

如果您不打算使用那么宽的图像，请将我上面建议的 900px 宽度更改为更小的值。

于 2010-07-15T14:18:34.227 回答