Keep child divs on one line?

Question

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.

Answer 1

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.

Answer 2

You have inline element and block elements together.

Set them all display:inline-block; andwhite-space will be efficient.

#list {
  white-space:nowrap;
}
#list div ,
#list a {
  display:inline-block;
  white-space:normal;
  vertical-align:middle/* or else value*/
}

Answer 3

As opposed to the other answers, I see no need to modify the children's CSS:

The only thing needed is making the list flex based, like so:

#list {
  display: inline-flex;  
}

/* simulating your spacer */
#spacer { width: 10px; height:10px; }

<div id="list">
    <a><div>link1</div></a>
    <div id="spacer"></div>
    <a><div>link2</div></a>
    <div id="spacer"></div>
    <a><div>link3</div></a>
    <div id="spacer"></div>
    <a><div>link4</div></a>
    <div id="spacer"></div>
    <a><div>link5</div></a>
    <div id="spacer"></div>
    <a><div>link6</div></a>
</div>