0

在小型显示器上图像换行到下一行的问题有没有办法让它保持在同一行并且只是让滚动条看起来可以看到所有图像或其他东西？

<body style="font-name:Arial,Helvetica;font-size:10pt">
   <h1>Order Confirmation</h1>  
     <img src="http://www.new-line.com/catalog/images/nlbanner1.png" /><img src="http://www.new-line.com/catalog/images/nlbanner2.png" />

http://www.new-line.com/catalog/images/nlbanner1.png http://www.new-line.com/catalog/images/nlbanner2.png

它正在这样做，但我希望 nlbanner 2 在同一行的 nlbanner1 旁边。它在大型显示器上看起来很棒，但小型和移动设备似乎有这个问题。有什么建议么？

4

1 回答 1

3

在图像周围添加一个div：

<div class="pic">
   <img src="http://www.new-line.com/catalog/images/nlbanner1.png" /><img src="http://www.new-line.com/catalog/images/nlbanner2.png" />
</div>

然后使用 CSS：

.pic {
  white-space: nowrap;  
}

就像提到的 Charles380 一样，如果您想要滚动功能，请使用：

.pic {
  white-space: nowrap;
  overflow: scroll;  
}

请注意，这也会导致出现滚动条，这可能与您想要的外观不符。

jsfiddle

于 2013-08-07T18:46:14.103 回答