如何在滚动条中水平显示图像？ [英] How to display image horizontally in scroll bar?

问题描述

如何在滚动条中水平显示图像？我试过了，但是我在scroll中垂直输出。请帮助我

How to display image horizontally in scroll bar? I tried but i am getting output vertically in scroll.Please help me

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

推荐答案

定义<将code>空格设置为 nowrap ，最后 overflow-x 到 scroll 。图像的容器不会超出指定的宽度，图像将全部显示在其内部。一旦图像对于容器来说太大，它们将被截断，并且你在滑块下面得到滚动条。

Define a width to your wrapper, set the white-space to nowrap and finally overflow-x to scroll. The container of the images won't grow beyond the specified width, and the images will all be displayed inside of it. Once the images are too big for the container, they will be cutoff and you get a scrollbar below the slider.

.wrapper{
    width: 500px; 
    overflow-x:scroll;     
    white-space: nowrap;
}

小提琴： http://jsfiddle.net/a9zq2Ly2/

这篇关于如何在滚动条中水平显示图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！