html – 水平滚动的图像列表

概述我正在尝试创建一个水平滚动列表.当Javascript启用时,我将替换为一个花哨的版本,但是我希望在合理的现代浏览器中使用Javascript并且可以正常工作,而且Javascript(任何以任何方式使用Javascript的建议都是关闭的). 我目前的标记/ CSS工作,但这里是我不喜欢的： >当前标记指定非常宽的ul(即10000px)和一个在此滚动的容器.有没有办法避免这种情况,而是根据其内 我正在尝试创建一个水平滚动列表.当JavaScript启用时,我将替换为一个花哨的版本,但是我希望在合理的现代浏览器中使用JavaScript并且可以正常工作,而且JavaScript(任何以任何方式使用JavaScript的建议都是关闭的).

我目前的标记/ CSS工作,但这里是我不喜欢的：

>当前标记指定非常宽的ul(即10000px)和一个在此滚动的容器.有没有办法避免这种情况,而是根据其内容扩大宽度(即蓝色背景不应该在那里)？
>有两个额外的div(ID#extra1,#extra2)只是为了造型目的.有没有办法消除这个额外的div？
>如果没有足够的图像来填充页面宽度,则滚动条应该会折叠,但是目前它不是因为我有一个非常宽的ul,不能崩溃.
>< a>标签由水平列表分隔,我最好想保持在一起.有没有办法让他们靠近在一起,在CSS中干净地分开？

另外,你知道任何讨论这种事情的教程吗？我已经看到几个教程,演示了整个页面滚动,我从中提取了一些想法,但我找不到任何演示滚动的ul / ol元素.

额外的信息可能有帮助：

>页面的宽度是静态的(即它不是流体/d性布局).
>页面中的图像是从PHP动态生成的,图像数量可以改变.
>缩略图的宽度是明确的.

剥离实例：http://dl.dropbox.com/u/17261360/horiz.html

解决方法 这适用于我,在firefox 4 beta 10中测试,建议在IE中测试它：

<ul >  <li>...</li>  <li>...</li>  <li>...</li></ul>

CSS中的诀窍是设置lis显示：inline,因此它们被视为字符并放置在彼此的旁边,并在ul上设置空格：nowrap,以便不会执行换行.滚动然后简单地是overflow-x：auto,其余的是显而易见的：

ul.images {  margin: 0;  padding: 0;  white-space: nowrap;  wIDth: 900px;  overflow-x: auto;  background-color: #ddd;}ul.images li {  display: inline;  wIDth: 150px;  height: 150px;}

Live example here

添加上一个/下一个按钮可以通过position：absolute或者float：left,或者你想要的任何其他方法来完成.

总结

以上是内存溢出为你收集整理的html – 水平滚动的图像列表全部内容，希望文章能够帮你解决html – 水平滚动的图像列表所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。