Html 带有滚动条的溢出水平列表

好的，让我解释一下我想做什么：

• 我有一个包含项目的

  ul

  列表
• 项目具有固定的宽度（和高度）
• 名单是横向的
• 当项目“溢出”其容器时，我希望它们保持在同一行（并且能够在容器中水平滚动）

结果是：

当有超过容器可处理的项目时，“溢出”元素移动到下面的行

演示：

---

我做错了什么

您需要将

空白：nowrap

添加到父元素，即

ul

，以避免换行到下一行

正文{
保证金：0；
填充：0；
}
ul#标签{
边框底部：1px纯黑；
列表样式类型：无；
保证金：0；
填充：0；
溢出-x：滚动；
溢出y：隐藏；
宽度：100%；
空白：nowrap；
}
标签：：-webkit滚动条{
显示：无；
}
ul#tabs li{
宽度：150px！重要；
高度：30px！重要；
垫面：5px；
边框：1px纯红；
文本对齐：居中；
保证金：0；
显示：内联块；
}
ul#tabs li:悬停{
背景：#eee；
颜色：#00f；
}

一个
两个
三
四
五
六
七

正文{
保证金：0；
填充：0；
}
ul#标签{
边框底部：1px纯黑；
列表样式类型：无；
保证金：0；
填充：0；
溢出-x：滚动；
溢出y：隐藏；
宽度：100%；
空白：nowrap；
}
标签：：-webkit滚动条{
/*显示：无*/
}
ul#tabs li{
宽度：150px！重要；
高度：30px！重要；
垫面：5px；
边框：1px纯红；
文本对齐：居中；
保证金：0；
显示：内联块；
}
ul#tabs li:悬停{
背景：#eee；
颜色：#00f；
}

一个
两个
三
四
五
六
七

Argh。。。。我知道这很简单。只是学到了一些东西。非常感谢！：）