水平滚动图像列表 [英] Horizontally scrolling list of images

问题描述

我正在尝试创建一个水平滚动列表。我将替换为一个花哨的版本，当Javascript被启用，但我想标记和CSS看起来和工作良好没有Javascript在合理的现代浏览器（任何建议使用Javascript在任何方式都关闭）。

我当前的标记/ css工作，但这里是我不喜欢的：

• 当前标记指定一个非常宽的ul（即10000px）和一个在其上滚动的容器。 有没有办法避免这种情况，而是根据其内容展开宽度（即不应有蓝色背景）？


• 外来 div s（那些id ＃extra1 ，＃extra2 ）只是为了样式目的。 有没有办法消除这个额外的div？


• 如果没有足够的图像来填充页面宽度，滚动条应该折叠，因为我有一个非常宽的ul不能折叠。


• < a> 标签由水平列表分隔，想保持他们在一起。 有没有办法让他们靠近在一起，并在CSS中干净地分开他们？

知道任何讨论这种事情的教程？我看过几个教程，演示了整个页面滚动，我从那些，但我没有找到任何显示滚动ul / ol元素的任何。

可能有帮助的额外资讯：

• 网页宽度是静态的（即不是流体/弹性布局）。


• 页面中的图片是从PHP动态生成的，图片数量可以更改。

删除现场示例： http://dl.dropbox.com/u/17261360/horiz.html

解决方案 div>

这适用于我，在Firefox 4 beta 10测试，也建议在IE中测试它：

 < ul class =images> 
< li> ...< / li> 
< li> ...< / li> 
< li> ...< / li> 
< / ul> 
  

CSS中的技巧是设置 li s到 display：inline ，因此它们被视为字符并放置在彼此旁边，并设置 white-space：nowrap 上的 ul ，以便不做换行。滚动就是简单的 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 ，或任何其他您喜欢的方法。

I'm trying to create a horizontally scrolling list. I'm going to replace this with a fancy version when Javascript is enabled, but I want the markup and css to look and work fine without Javascript on reasonably modern browsers (any suggestions that uses Javascript in any way is off).

My current markup/css works, but here's what I don't like about it:

• The current markup specify a very wide ul (i.e. 10000px) and a container that scrolls on this. Is there a way to avoid this and instead have the width expands based on its content (i.e. the blue background shouldn't be there)?
• There are two extraneous divs (those with id #extra1, #extra2) that is just for styling purpose. Is there a way to eliminate this extra div?
• If there is not enough image to fill the page width, the scrollbar should collapse, but currently it does not because I have a very wide ul which cannot collapse.
• The <a> tag are separated by the horizontal list, I preferably want to keep them together. Is there a way to have them close together and cleanly separate them in CSS?

Aside, do you know of any tutorials that discussed this sort of thing? I've seen several tutorials that demonstrated having the whole page to scroll, and I took some ideas from those, but I can't find any that demonstrated scrolling ul/ol element.

Extra info that might help:

• The width of the page is static (i.e. it is not fluid/elastic layout).
• The images in the page is dynamically generated from PHP, and the number of images can change.
• The width of the thumbnails are well-defined.

Stripped down live example: http://dl.dropbox.com/u/17261360/horiz.html

解决方案

This works for me, tested in Firefox 4 beta 10, would be advisable to test it in IE as well:

<ul class="images">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

The trick in the CSS is to set the lis to display:inline, so they are treated as characters and placed next to each other, and set white-space:nowrap on the ul so that no line breaking is done. The scrolling is then simply overflow-x:auto and the rest is obvious:

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

Adding prev/next buttons could be done with position:absolute, or with float:left, or whatever other method you fancy.

这篇关于水平滚动图像列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！