Question

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

我要做的就是将一行缩略图放入一行。 white-space和display:inline stuff mentioned here无效。

因此，代码将显示在我的网站上面，我甚至尝试了kludgy table和table-cell这些东西。这会将缩略图放在一行中，但不会显示水平滚动条（我希望缩略图行是其上方大图像的最大宽度）。 overflow-x: scroll指令什么都不做。

问题：

是否可以在不使用表格和表格单元的情况下实现此效果？我确实希望这是“响应”，不知何故，我觉得桌面的东西可能不适用于移动屏幕。
无论哪种方式，我怎样才能显示水平条？

非常感谢任何想法！

编辑：此处也添加了代码：

该页面上的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

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

删除所有<br>元素
将CSS类display的{{1}}规则从.thumbnails更改为table：

block

你会得到这个：

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

干杯！

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

1 个答案: