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


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

查看所有标签

猜你喜欢:

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

Learn Python 3 the Hard Way

Learn Python 3 the Hard Way

Zed A. Shaw / Addison / 2017-7-7 / USD 30.74

You Will Learn Python 3! Zed Shaw has perfected the world’s best system for learning Python 3. Follow it and you will succeed—just like the millions of beginners Zed has taught to date! You bring t......一起来看看 《Learn Python 3 the Hard Way》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具