Using float: left
on the elements will cause them to ignore the nowrap
rule. Since you are already using display: inline-block
, you don't need to float the elements to have them display side-by-side. Just remove float: left
CSS. Remove Overflow-y. Nowrap. Keep Elements Inline
Pregunta
What is wrong with this? Ive read a couple of posts which suggest that in order to have inline-block elements all on the same line with only overflow-x, the following CSS is all that is required on the parent:
div {
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
}
This is my CSS, straight from my firebug for both the parent, and the elements which i need on the same line. The elements are wrapping with only a vertical overflow. Im confused. Any suggestions?
.elementsRequiredOnSameLine {
background: none repeat scroll 0 0 white;
display: inline-block;
float: left;
height: 10em;
text-align: center;
width: 6em;
}
.parent{
display: inline-block;
margin: 10px auto;
min-height: 12em;
overflow-x: scroll;
padding: 10px;
white-space: nowrap;
width: 95%;
}
Solución
Otros consejos
Was because of the float:left;, once i removed that, fine. Spotted it after typing out question sorry.
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow