如何在滚动条中水平显示图像？我尝试过，但是我正在垂直滚动输出。请帮助我
<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>
width为包装器定义一个，将设置white-space为nowrap，最后设置overflow-x为scroll。图像的容器不会超过指定的宽度，所有图像都将显示在其中。一旦图像对于容器来说太大了，它们将被剪切掉，并且在滑块下方会出现一个滚动条。
.wrapper{
width: 500px;
overflow-x:scroll;
white-space: nowrap;
}
小提琴：http : //jsfiddle.net/a9zq2Ly2/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句