È possibile impedire il wrapping di elementi figlio in HTML?

Question

.container 
{ 
position: absolute; 
bottom: 0px; 
height: 25px; 
left: 200px; 
padding-right: 5px; 
background-color: black; 
overflow: hidden; 
} 


.child 
{ 
position: relative; 
float: left; 
height: 100%; 
width: 95px; 
background-color: #99CCFF; 
margin-left: 5px; 
} 

I quando la dimensione della finestra del browser è inferiore a quella che consentirà a tutti i bambini di adattarsi senza il wrapping, vorrei che ci fosse una barra di scorrimento, non il meccanismo predefinito dell'involucro degli elementi figlio.

Non ho il controllo del numero di elementi figlio, quindi non posso impostare una larghezza sul contenitore. Come posso impedire il wrapping degli elementi figli?

Answer 1

Se non si desidera eseguire il wrapping, non utilizzare i float: sono stati creati appositamente per il wrapping.

Utilizzare un contenitore padre con overflow:auto e white-space:nowrap e bambini con display:inline o inline-block.

Answer 2

Questo non è realmente possibile con semplici HTML e CSS. Senza conoscere il numero di elementi figlio, l'unico modo sarebbe quello di impostare dinamicamente una larghezza minima usando JavaScript, in base al numero di elementi figlio e alla loro larghezza totale.

Answer 3

È possibile aggiungere un titolare genitore() di tutti i child. E poi usa l'overflow: auto di quel div. Se non funziona, usa anche self.innerHeight e self.innerWidth (tramite javascript) per l'altezza e la larghezza del div.