html - 如何使用 css 强制 html 元素显示在一行中？

Question

我想只使用 html 和 css(没有 javascript)制作一个菜单。它应该有几个彼此相邻的链接和一个滚动条——一个水平滚动条——这样人们就可以访问所有链接。

我不知道如何强制这些链接彼此相邻显示，而不是中断并显示在另一行中。我现在拥有的东西看起来像这样:jsfiddle

html: <nav>
<a>Site1</a>
<a>Site2</a>
<a>Site3</a>
...
<a>Site17</a>
<a>Site18</a>
<a>Site19</a>
</nav

CSS: nav {
position: fixed;
top: 0;
left: 0;
height: 100;
background: #c00;
overflow-x: scroll;
overflow-y: hidden;
}

编辑:解决方案是添加 white-space: nowrap到CSS。 jsfiddle

Answer 1

检查一下:http://jsfiddle.net/dmc56jkd/3/

white-space: nowrap;

此属性可防止不需要的文本换行。