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>

本质上，这是一个水平滚动的移动设备导航栏。正常版本使此栏垂直（工作正常），“spacer”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;
}

ALSO ：ID应该是每页唯一的。您不能拥有多个#spacer div，您应该只有一个class {{1}}。如果你想要多个，{{1}}是可行的方法。

Answer 2

您将内联元素和块元素放在一起。

将它们全部设为display:inline-block;，white-space效率很高。

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

将孩子的div保持在一条线上？

2 个答案: