How can I make a group of inline-block elements scroll inside of a div

Question

I have a bunch of <label> elements in my <footer>. Right now, the labels wrap when they exceed the width of the <footer>.

How can I make the labels scroll horizontally inside of the footer?

Here is a JSFiddle where the labels are wrapping. http://jsfiddle.net/DTcHh/5088/

Answer 1

It's very simple:

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;
}

Demo: http://jsfiddle.net/DTcHh/5091/

Answer 2

This should help out. Use:

white-space: nowrap;

to prevent it from starting on a new line, and then:

overflow-x: scroll;

to make it use a scrollbar.