Question

我想用html和css（没有javascript）制作一个菜单。它应该有几个彼此相邻的链接和一个滚动条 - 一个HORIZONTAL滚动条 - 所以可以访问所有链接。

我无法弄清楚如何强制这些链接彼此相邻显示，而不是中断和显示在另一行。我现在的untiol看起来像这样：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;

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

Answer 2

关键是添加white-space: nowrap

这是你小提琴的一个分支，使用以下CSS

nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100;
    background: #c00;
    overflow-x: scroll;
    width: 300px;
    white-space: nowrap;
}

出于演示目的，我限制了nav的宽度。如果您希望它与包含元素一样宽，请使用width: 100%（如果您根本没有定义宽度，则滚动条滑块可能不会显示）

http://jsfiddle.net/7tzo3vrh/

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

2 个答案: