如何在滚动条中水平显示图像？我尝试过，但我在滚动中垂直输出。请帮助我
<div style="width: 1000px; height: 500px; overflow-x:scroll; padding: 5px; display:inline-block; float:left;" >
<div id="slider4" class="text-center">
<div class="slide-img">
<img src="img/team/team1.png">
<p style="font-weight: bold;">B Madhuprasad</p>
<p>Chairman,</p>
<p>Non-Executive</p>
</div>
<div class="slide-img">
<img src="img/team/team2.png">
<p style="font-weight: bold;">Vineet Suchanti</p>
<p>Managing </p>
<p>Director</p>
</div>
<div class="slide-img">
<img src="img/team/team3.png">
<p style="font-weight: bold;">Uday Patil</p>
<p>Director,</p>
<p>ECM</p>
</div>
<div class="slide-img">
<img src="img/team/team4.png">
<p style="font-weight: bold;">Rakesh Choudhari</p>
<p>Managing Director, </p>
<p>Stock Broking</p>
</div>
<div class="slide-img">
<img src="img/team/team5.png">
<p style="font-weight: bold;">Radha Kirthivasan</p>
<p>Senior Vice President,</p>
<p>EDM</p>
</div>
<div class="slide-img">
<img src="img/team/team6.png">
<p style="font-weight: bold;">Nipun Lodha</p>
<p>Head,</p>
<p>Investment Banking</p>
</div>
<div class="slide-img">
<img src="img/team/team07.png">
<p style="font-weight: bold;">Nilesh Dhruv</p>
<p>Head,</p>
<p>Equity Dealing</p>
</div>
<div class="slide-img">
<img src="img/team/team08.png">
<p style="font-weight: bold;">Jayraj Nair</p>
<p>Head, </p>
<p>Depositories</p>
</div>
<div class="slide-img">
<img src="img/team/team09.png">
<p style="font-weight: bold;">Ankur Mestry</p>
<p>Head, <br/>Mutual Funds & <br/>IPO Distribution</p>
</div>
<div class="slide-img">
<img src="img/team/team10.png">
<p style="font-weight: bold;">Cherian MJ</p>
<p>Vice President, </p>
<p>Keynote ESOP</p>
</div>
</div>
</div>
</div>
最佳答案
为包装器定义一个宽度，将white-space设置为nowrap，最后设置overflow-x到滚动。图像的容器不会超出指定的宽度，并且图像将全部显示在其中。一旦图像对于容器来说太大，它们就会被截断，并且 slider 下方会出现一个滚动条。
.wrapper{
width: 500px;
overflow-x:scroll;
white-space: nowrap;
}
fiddle :http://jsfiddle.net/a9zq2Ly2/
关于html - 如何在滚动条中水平显示图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30507510/