内容简介: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 动态生成的,图像数量可以改变.
>缩略图的宽度是明确的.
这适用于我,在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; }
添加上一个/下一个按钮可以通过position:absolute或者float:left,或者你想要的任何其他方法来完成.
http://stackoverflow.com/questions/5206140/horizontally-scrolling-list-of-images
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 机器学习不断接近人脑水平 AI图像识别未来发展如何?
- Java程序员怎样才能在两年内,技术水平达到月薪2w的水平呢!
- 水平分库如何做到平滑扩展
- Redis集群水平扩展(二)
- Redis集群水平扩展(一)
- Vuetify 之水平對齊
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
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》 这本书的介绍吧!