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

【问题标题】：How can I make a group of inline-block elements scroll inside of a div如何使一组内联块元素在 div 内滚动
【发布时间】：2023-03-09 19:23:01
【问题描述】：

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

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

这是一个 JSFiddle，其中标签被包装。 http://jsfiddle.net/DTcHh/5088/

【问题讨论】：

标签： css twitter-bootstrap overflow

【解决方案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/

【讨论】：

【解决方案2】：

This 应该帮忙。使用：

white-space: nowrap;

防止它从新行开始，然后：

overflow-x: scroll;

让它使用滚动条。

【讨论】：

请注意，即使滚动条没有溢出，也会强制滚动条。 @Arbel 使用 auto 可能会更好