Wie kann verhindert werden, dass Tasten nach unten überlaufen?

Question

Ich habe ein div, das einige Tasten enthält. Das div hat einen Überlauf, so dass die Tasten noch benutzbar sind, wenn der Bildschirm in der Größe verändert wird, aber es ist nicht so überfüllt, wie ich es mir erhofft hatte.

div { 
 
    background-color: #eee; 
 
    width: 300px; 
 
    height: 30px; 
 
    overflow: auto; 
 
} 
 
button { 
 
    height: 30px; 
 
}

<div> 
 
    <button>BUTT 01</button> 
 
    <button>BUTT 02</button> 
 
    <button>BUTT 03</button> 
 
    <button>BUTT 04</button> 
 
    <button>BUTT 05</button> 
 
    <button>BUTT 06</button> 
 
</div>

Wenn das div klein genug ist, den Überlauf bewegt er sich die letzten Tasten nach unten und dann der Überlauf nach unten ist zu triggern.

Ist es möglich, dass die Bilder horizontal zueinander stehen und entlang der x-Achse überlaufen?

Ich habe einen jsFiddle https://jsfiddle.net/ntxcxkhx/ um das Problem zu veranschaulichen, dass ich

Answer 1

Sie white-space: nowrap; auf dem Behälter eingestellt werden.

div { 
 
    background-color: #eee; 
 
    width: 200px; 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
} 
 
button { 
 
    height: 30px; 
 
}

<div> 
 
    <button>BUTT 01</button> 
 
    <button>BUTT 02</button> 
 
    <button>BUTT 03</button> 
 
    <button>BUTT 04</button> 
 
    <button>BUTT 05</button> 
 
    <button>BUTT 06</button> 
 
</div>

Answer 2

Fügen Sie einfach display:flex und overflow-x:auto; overflow-y:hidden habe div ist

Hier die JSfiddle Example

Answer 3

Da Sie eine dynamische Breite auf dem übergeordneten div gesetzt ist, wird der Behälter in Bezug auf die Fensterbreite der Größe, die Schaltflächen auf eine neue Linie zu zwingen.

Mit overflow-x: scroll und white-space: nowrap sollten Sie das gewünschte Verhalten erhalten.

JSFiddle: https://jsfiddle.net/ntxcxkhx/27/