Khushi Khushi - 7 months ago 9
HTML Question

stop elements wrap in div

Suppose I have 15 images, which I want to display in a div.
So, I add them dynamically using JQuery.

But the output is
enter image description here

The css for the above image is

.item
{
float: left;
width: 120px;
height: 120px;
background-image: url('images/txt.png');
background-repeat: no-repeat;
background-position-x: center;
}


and css for div is :

#fileName
{
margin-top: 10px;
}


so I tried the following css :

#fileName
{
margin-top: 10px;
overflow-x : auto;
}


then my o/p is :

enter image description here

I have also tried
overflow-wrap
css property. But still I cant solve my problem.

I want to have all the images in one line and if it does not fit the div then div should have a horizontal scrollbar.

Answer

Try using this on the parent:

white-space:nowrap;

and display: inline-block; instead of floats