将子div保持在一行？

Question

我已经尝试了我能找到的所有建议（其中大多数涉及“white-space：nowrap”和“display：inline-block”），但到目前为止，没有任何方法可以让这些子 div 保持在一行并水平滚动。

我的代码：

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

本质上，这是一个用于水平滚动的移动设备的导航栏。普通版本有这个竖条（工作正常），“间隔”div 用作分隔符，从水平规则切换到垂直规则。

Answer 1

您正在寻找 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;
}

另外：每页的 ID 应该是唯一的。你不能有多个#spacer divs，你应该只有一个。如果你想要多个，class是要走的路。