如何强制缩略图向右溢出而不是在下方

Question

我正在制作带有缩略图的图像滑块。问题是，当缩略图的数量超过容器的宽度时，缩略图显然会下降，低于第一行。我想知道您如何强制缩略图保持在一行并需要水平滚动条。

CSS

#thumbnail-wrap {
    width: 150%;
    padding: 5px;
    max-height: 85px;
}

#thumbnail-wrap img {
    max-height: 75px;
    display: inline;
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: pointer;
}

HTML

<div id="gallery-wrap">
<img id="main-img" src="img/projects/merthyr-dyfan/1.jpg" alt="The chapel"/>
<span id="caption"></span>
<div id="thumbnail-wrap">
<img class="active-thumb" src="img/projects/merthyr-dyfan/1.jpg" alt="Something"/>
<img src="img/projects/merthyr-dyfan/2.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/3.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/4.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/5.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/6.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/7.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/8.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/9.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/10.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/11.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/12.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/13.jpg" alt="Something else"/>
</div>
</div>

我知道这可能是非常基本的，但我不确定如何用它来表达这里或 Google 上的任何相关内容。谢谢

Answer 1

如何使用 <nobr> 标签

#thumbnail-wrap {
    width: 150%;
    padding: 5px;
    max-height: 85px;
}

#thumbnail-wrap img {
    max-height: 75px;
    display: inline;
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: pointer;
}

<div id="gallery-wrap">
    <nobr>
<img id="main-img" src="img/projects/merthyr-dyfan/1.jpg" alt="The chapel"/>
<span id="caption"></span>
<div id="thumbnail-wrap">
<img class="active-thumb" src="img/projects/merthyr-dyfan/1.jpg" alt="Something"/>
<img src="img/projects/merthyr-dyfan/2.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/3.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/4.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/5.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/6.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/7.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/8.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/9.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/10.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/11.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/12.jpg" alt="Something else"/>
<img src="img/projects/merthyr-dyfan/13.jpg" alt="Something else"/>
</div>
    </nobr>
</div>

如何强制缩略图向右溢出而不是在下方

How to force thumbnails to overflow right and not below

html

css

image

overflow