如何強制縮略圖向右溢出但不低於

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> 

我知道這可能是很基本的，但我不知道如何短語它找到任何有關在這裏或谷歌。謝謝。

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>