Keep child divs on one line?

Issue

I've tried every suggestion I could find (most of them involving white-space:nowrap and display:inline-block) but so far nothing has worked to get these child divs to stay on one line and scroll horizontally.

My code:

<div id="list">
    <a href="javascript:show('shown','id1','a1');"><div id="a1" class="inactive">link1</div></a>
    <div id="spacer"></div>
    <a href="javascript:show('shown','id2','a2');"><div id="a2" class="inactive">link2</div></a>
    <div id="spacer"></div>
    <a href="javascript:show('shown','id3','a3');"><div id="a3" class="inactive">link3</div></a>
    <div id="spacer"></div>
    <a href="javascript:show('shown','id4','a4');"><div id="a4" class="inactive">link4</div></a>
    <div id="spacer"></div>
    <a href="javascript:show('shown','id5','a5');"><div id="a5" class="inactive">link5</div></a>
    <div id="spacer"></div>
    <a href="javascript:show('shown','id6','a6');"><div id="a6" class="inactive">link6</div></a>
</div>

Essentially this is a navigation bar for mobile devices that scrolls horizontally.

The normal version has this bar vertical (working fine) and the "spacer" div is used as a divider, switching from a horizontal rule to a vertical rule.

Solution

You're looking for white-space: nowrap;

http://jsfiddle.net/ySMdY/1/

#list {
    white-space: nowrap;
}
#list a, #list a div, #list .spacer {
    display: inline-block;
}
#list a {
    /* just some styles so I can see it working */
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0 50px;
}

ALSO: IDs are supposed to unique per page. You can't have multiple #spacer divs, you should only have one. If you want multiple, class is the way to go.

Answered By - Ming