如何使一组内联块元素在div内滚动

Question

我的<label>中有一堆<footer>个元素。现在，当标签超过<footer>的宽度时，标签会换行。

如何使标签在页脚内水平滚动？

这是一个标签包装的JSFiddle。 http://jsfiddle.net/DTcHh/5088/

Answer 1

非常简单：

footer {
    background: black;
    padding: 10px;
    overflow-x: auto; /* scrollbar only when needed */
}
footer .btn-group {
    font-size: 0; /* eliminates the white space gap between non-floated .btn s */
    white-space: nowrap; /* prevents child inline .btn s from wrapping to the next line */
}
footer .btn-group .btn {
    float: none;
}

演示： http://jsfiddle.net/DTcHh/5091/

Answer 2

This应该有所帮助。使用：

white-space: nowrap;

阻止它在新行上开始，然后：

overflow-x: scroll;

使其使用滚动条。