CODEWITHSUNDEEP
htmlcss
Niranjan Kumar
Niranjan Kumar

Reputation: 869

How to force li elements to scroll horizontally and should be able to accommodate all the li elements in only one single line using css

I am trying to change the default scrolling of li elements from vertical to horizontal. I am able to do this but its coming as a list of elements in a line then another list of elements below it. But I want all the list to be in one single line regardless of number of li elements.

Code in HTML:

<div class="imageGallery">
       <ul>
           <li><img src="img01.png"/></li>
           <li><img src="img02.png"/></li>
           <li><img src="img03.png"/></li>
           <li><img src="img04.png"/></li>
           .....
           .....
       </ul>
</div>

css:

.imageGallery {
    overflow-x: scroll;
        overflow-y: hidden;

}   
        ul {
        width: 1500px;
        margin: 0;
        padding: 0;
    }

The output is coming as a horizontal scrollbar with list of images in a line then list of elements below it and so on. How can I make it all to come in single line?

Thanking you all for the help.

Upvotes: 1

Views: 4737

Answers (1)

pictoru
pictoru

Reputation: 752

if I understand well you want all li elements to stay in one line. put this in your css

.imageGallery ul{
    white-space: nowrap
} 
.imageGallery li{ 
    display:inline-block 
}

Upvotes: 4

Related Questions