javascript - force inner elements to overflow-x - Stack Overflow

admin管理员组

文章数量:1247209

I have structure of :

#navBar {
    height: 55px;
    width: 40px; 
    overflow-x:scroll; 
    overflow-y:hidden;
}

<div id="navBar">
akdhbaIDBhbfbhwhfbaibf
    <div style="width: 80; float: left;  text-align: center;">
    <img src="http://192.168.2.105/SB_Site/icons/Home2.jpg" alt="Nav1" />
    <br />
    <span style="font-size: 80%">Nav1</span>
    </div>
    <div style=" width: 80; float: left;  text-align: center;">
    <img src="http://192.168.2.105/SB_Site/icons/Home2.jpg" alt="Nav2" />
    <br />
    <span style="font-size: 80%">Nav2</span>
    </div>
    <div style=" width: 80; float: left;  text-align: center;">
    <img src="http://192.168.2.105/SB_Site/icons/Home2.jpg" alt="Nav3" />
    <br />
    <span style="font-size: 80%">Nav3</span>
    </div>
</div>

I want that all of the inner divs will scroll-x and not break the line. How can I achieve that?

I have structure of :

#navBar {
    height: 55px;
    width: 40px; 
    overflow-x:scroll; 
    overflow-y:hidden;
}

<div id="navBar">
akdhbaIDBhbfbhwhfbaibf
    <div style="width: 80; float: left;  text-align: center;">
    <img src="http://192.168.2.105/SB_Site/icons/Home2.jpg" alt="Nav1" />
    <br />
    <span style="font-size: 80%">Nav1</span>
    </div>
    <div style=" width: 80; float: left;  text-align: center;">
    <img src="http://192.168.2.105/SB_Site/icons/Home2.jpg" alt="Nav2" />
    <br />
    <span style="font-size: 80%">Nav2</span>
    </div>
    <div style=" width: 80; float: left;  text-align: center;">
    <img src="http://192.168.2.105/SB_Site/icons/Home2.jpg" alt="Nav3" />
    <br />
    <span style="font-size: 80%">Nav3</span>
    </div>
</div>

I want that all of the inner divs will scroll-x and not break the line. How can I achieve that?

• javascript
• html
• css

Share Improve this question Follow edited Jul 21, 2012 at 14:43 Jezen Thomas 13.8k77 gold badges5454 silver badges9595 bronze badges asked Jul 21, 2012 at 6:37 the_farmerthe_farmer 66911 gold badge1010 silver badges2323 bronze badges 1

• Hi,I need all the inner divs will be in one line. – the_farmer Commented Jul 21, 2012 at 6:49

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

This will work:

<style type="text/css">
    #navBar {
        height: 55px;
        width: 80px;
        overflow-x: scroll;
        overflow-y:hidden;
        white-space: nowrap;
    }

    #navBar div {
        display: inline-block;
    }
</style>

and for HTML part:

<div id="navBar">
        akdhbaIDBhbfbhwhfbaibf
        <div style="width: 100px; text-align: center; background-color: red;">
            <img src="" alt="Nav1" />
            <br />
            <span style="font-size: 80%">Nav1</span>
        </div>
        <div style=" width: 100px; text-align: center;">
            <img src="" alt="Nav2" />
            <br />
            <span style="font-size: 80%">Nav2</span>
        </div>
        <div style=" width: 100px; text-align: center; background-color: red;">
            <img src="" alt="Nav3" />
            <br />
            <span style="font-size: 80%">Nav3</span>
        </div>
</div>

No need for float: left; CSS.

Add white-space: nowrap to the #navBar and display: inline-block; to the inner divs. I believe that should do it.

Take a look at this fiddle: http://jsfiddle/fzLwX/1/

This might be what you're looking for:

#navBar div{
    overflow-x:auto;
}

本文标签： javascriptforce inner elements to overflowxStack Overflow