使用水平滚动条将缩略图图像放在一行中

Question

所有代码都在这里内联:http: //shanxinc.com/test/fancybox2/

我所要做的就是将一行缩略图放到一行中.在white-space和display:inline 这里提到的东西是行不通的.

因此,代码将显示在我的网站上面,我甚至尝试了kludgy table和table-cell东西.这会将缩略图放在一行中,但不会显示水平滚动条(我希望缩略图行是其上方大图像的最大宽度).该 overflow-x: scroll指令无所作为.

问题:

1. 是否有可能在不使用表格和表格单元的情况下实现所需的效果？我确实希望这是"响应",不知何故,我觉得桌面的东西可能不适用于移动屏幕.

2. 无论哪种方式,我怎样才能显示水平条？

非常感谢任何想法!

---

编辑:这里也添加了代码:

该页面上的html代码非常简洁,因此您可以查看源代码？

这是HTML:

 <div class="holder">
      <img src="demo/img1.jpg" alt="" width="600" height="350">
      <div class="thumbnails">
          <a class="fancybox" rel="group" href="demo/img1.jpg" title="Exciting Title!"><img src="demo/img1s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img4.jpg" title="Bonjour!!"><img src="demo/img4s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img2.jpg" title="Yup, More Text.."><img src="demo/img2s.jpg" alt="" class="thumb"></a><br />
                <a class="fancybox" rel="group" href="demo/img3.jpg" title="Yelf Up."><img src="demo/img3s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img2.jpg" title="Yup, More Text.."><img src="demo/img2s.jpg" alt="" class="thumb"></a><br />
                <a class="fancybox" rel="group" href="demo/img3.jpg" title="Yelf Up."><img src="demo/img3s.jpg" alt="" class="thumb"></a>
          <a class="fancybox" rel="group" href="demo/img1.jpg" title="Exciting Title!"><img src="demo/img1s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img2.jpg" title="Yup, More Text.."><img src="demo/img2s.jpg" alt="" class="thumb"></a><br />
                <a class="fancybox" rel="group" href="demo/img4.jpg" title="Bonjour!!"><img src="demo/img4s.jpg" alt="" class="thumb"></a>
          <a class="fancybox" rel="group" href="demo/img1.jpg" title="Exciting Title!"><img src="demo/img1s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img3.jpg" title="Yelf Up."><img src="demo/img3s.jpg" alt="" class="thumb"></a>
                <a class="fancybox" rel="group" href="demo/img4.jpg" title="Bonjour!!"><img src="demo/img4s.jpg" alt="" class="thumb"></a>
      </div>
</div>

这是我试过的旧CSS,它不起作用,使用display: inline:

.holder { width: 600px; display: block;  }
.thumbnails { display: block; overflow-x: scroll !important; height: 75px; white-space: nowrap; }
.thumbnails a { display: inline; width: 75px; height: 50px; float: left; }
.thumbnails a .thumb { width: 75px; height: 50px; display: inline; }

这是我现在正在尝试的内容:

.holder, .thumbnails { width: 600px; }
.thumbnails { display: table; overflow-x: scroll; white-space: nowrap; }
.thumbnails a { display: table-cell; padding-right: 2px  }
.thumbnails a .thumb { width: 75px; height: 50px; }

这会在一行中显示缩略图,但不会显示水平滚动.

谢谢!

Answer 1

您可以按照以下步骤执行此操作:

1. 删除所有<br>元素
2. 更改display为CSS类规则.thumbnails来自table于block:

.thumbnails { display: block; overflow-x: scroll; white-space: nowrap; }

你会得到这个:

http://oi48.tinypic.com/audpba.jpg

干杯!