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>代码

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: