title: 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
body: <p>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.</p>
  
  <p>Code in HTML:</p>
  
  <pre><code>&lt;div class="imageGallery"&gt;
         &lt;ul&gt;
             &lt;li&gt;&lt;img src="img01.png"/&gt;&lt;/li&gt;
             &lt;li&gt;&lt;img src="img02.png"/&gt;&lt;/li&gt;
             &lt;li&gt;&lt;img src="img03.png"/&gt;&lt;/li&gt;
             &lt;li&gt;&lt;img src="img04.png"/&gt;&lt;/li&gt;
             .....
             .....
         &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.imageGallery {
      overflow-x: scroll;
          overflow-y: hidden;
  
  }   
          ul {
          width: 1500px;
          margin: 0;
          padding: 0;
      }
  </code></pre>
  
  <p>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?</p>
  
  <p>Thanking you all for the help.</p>