html – 水平滚动的图像列表

栏目: Html · 发布时间: 6年前

内容简介:http://stackoverflow.com/questions/5206140/horizontally-scrolling-list-of-images

我正在尝试创建一个水平滚动列表.当Javascript启用时,我将替换为一个花哨的版本,但是我希望在合理的现代浏览器中使用Javascript并且可以正常工作,而且Javascript(任何以任何方式使用Javascript的建议都是关闭的).

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

>当前标记指定非常宽的ul(即10000px)和一个在此滚动的容器.有没有办法避免这种情况,而是根据其内容扩大宽度(即蓝色背景不应该在那里)?

>有两个额外的div(id#extra1,#extra2)只是为了造型目的.有没有办法消除这个额外的div?

>如果没有足够的图像来填充页面宽度,则滚动条应该会折叠,但是目前它不是因为我有一个非常宽的ul,不能崩溃.

><a>标签由水平列表分隔,我最好想保持在一起.有没有办法让他们靠近在一起,在CSS中干净地分开?

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

额外的信息可能有帮助:

>页面的宽度是静态的(即它不是流体/弹性布局).

>页面中的图像是从 PHP 动态生成的,图像数量可以改变.

>缩略图的宽度是明确的.

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

这适用于我,在Firefox 4 beta 10中测试,建议在IE中测试它:

<ul class="images">
  <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,或者你想要的任何其他方法来完成.

http://stackoverflow.com/questions/5206140/horizontally-scrolling-list-of-images


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

网站分析实战

网站分析实战

王彦平 吴盛峰 / 电子工业出版社 / 2013-1 / 59.00元

《网站分析实战:如何以数据驱动决策,提升网站价值》由王彦平、吴盛峰著。目前,越来越多的网站开始重视数据,并期望从中发现新的机会,不管你是做网络营销、互联网产品设计、电子商务运营、个人站点运营维护,我们都希望从数据中寻找有价值的结论,并且指导公司管理层的决策,最终创造更大的网站价值。《网站分析实战:如何以数据驱动决策,提升网站价值》以通俗易懂的方式来讲解网站分析所需掌握的知识,剖析日常工作中遇到的问......一起来看看 《网站分析实战》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试