select dinámicos en una sola linea

[francap]

Hola, tengo el siguiente problema. Tengo una div a la cual dinámicamente le voy agregando select.

Estos select llegan a superar el tamaño de la div y cuando esto pasa el siguiente select lo coloca abajo del primero y con un scroll vertical. Yo quiero que pasa exactamente lo opusto.

Quiero que el siguente select lo coloque a la izquierda del anterior y el scrool sea horizontal.

selCat es el id de la div contenedora y select es la clase del select.

Código CSS:

#selCat{
    
    overflow:auto;
     height:450px;
     
     
}
#selCat .Select{
    width:200px;
    margin:20px;
    overflow:auto;
    
}
 

Creo que puedo resolver esto con una tabla... pero como quiero empezar a maquetar en css estoy tratando de no usarlas

Desde ya muchas gracias por su tiempo

[ArturoGallegos]

prueba con

Código CSS:

#selCat{overflow:auto;height:450px;white-space:nowrap;}
 

[francap]

No no me funciona.. pego el codigo HTML a ver si les doy una idea mejor de lo que trato de hacer

Código HTML:

<div style="visibility: visible;" id="div_categoria">
    
    <div id="selCat">
    
    <div id="selCat_0">
    
        <select id="SelectRaiz" class="Select" size="22">
            <option value="1">Alfajores</option>
            <option value="6">Caramelos</option></select>
            
    <div id="selCat_1">
        <select id="Select_1" class="Select" size="22">
            <option value="2">Gustos</option></select>
    
   <div id="selCat_2">
        <select id="Select_2" class="Select" size="22">
            <option value="3">Frutilla</option>
            <option value="4">Narana</option>
            <option value="5">Menta</option></select>
    <div id="selCat_3"></div>
    
    </div></div></div></div>
 
 
</div>
 

y el css

Código CSS:

/*######### Seleccionar Catergoria #####################*/
#div_categoria{
    position: absolute; 
    top: 100px; 
    left: 200px; 
    width: 80%; 
    height: 500px;
    background-color:#dfd7d7; 
    border-color:#009;
    border-style:groove;
    visibility:hidden;
     white-space:nowrap;
    
 
    
}
 
#selCat{
    
    overflow:auto;
     height:450px;
     white-space:nowrap;
     
     
}
 
#selCat div{
    white-space:nowrap; 
    background-color:#390; 
}
 
 
#selCat .Select{
    width:200px;
    margin:20px;
    overflow:auto;
    white-space:nowrap; 
    
}