Arrange li elements in a row with the ability to scroll horizontally

Question

Arrange li elements in a row with the ability to scroll horizontally

I'm attempting to create a paging effect using CSS but I've run into a bit of confusion. I want to arrange all the li elements next to each other within a specified parent width so that they scroll horizontally.


<ul class="flow" style="width:200px">  
    <li class="selected">1</li>
    <li><a href="#" title="Pagina 2">2</a></li>
    <li><a href="#" title="Pagina 3">3</a></li>
    
    <li><a href="#" title="Pagina 15">15</a></li>
</ul>

Check out my attempt on this Fiddle link. The issue I'm facing is that the li elements are breaking into new lines. How can I make them scroll horizontally in a single line?

html css pagination

Answer 1

Answer №1

white-space

nowrap - The nowrap value for white-space property collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
  white-space: nowrap;
  overflow: auto;
  /*width:300px;*/ /* <  uncomment to check with fix width*/
}
ul li {
  display: inline-block;
  border: 1px solid grey;
  padding: 15px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
</ul>

Answer 2

white-space

nowrap - The nowrap value for white-space property collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
  white-space: nowrap;
  overflow: auto;
  /*width:300px;*/ /* <  uncomment to check with fix width*/
}
ul li {
  display: inline-block;
  border: 1px solid grey;
  padding: 15px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
</ul>

Answer 3

Answer №2

Enclose your second list in a div element and apply the following styling to that div Check out this code snippet on http://jsfiddle.net/bn4f9j58/

   div{ 
        display: inline-block;
        width: 250px;
        overflow-y: hidden;
      }

Answer 4

Enclose your second list in a div element and apply the following styling to that div Check out this code snippet on http://jsfiddle.net/bn4f9j58/

   div{ 
        display: inline-block;
        width: 250px;
        overflow-y: hidden;
      }

Arrange li elements in a row with the ability to scroll horizontally

Answer №1

Answer №2

Similar questions

Altering the appearance of a component that is currently selected and in use

Struggling to adjust the width of an <img> tag to fit the screen within a UITextView/HTML using NSAttributedString

How to properly format credit card input using JavaScript or jQuery

Conflict between multiple jQuery files

Strange glitch in the rendering of rectangles on HTML5 canvas?

Minimize white spaces when validating input fields in a form using Javascript

Please select the links located beneath the see-through triangular or polygonal shapes

What is the best way to ensure that two divs in the same row float in opposite directions?

What is the best storage location for div elements used in jQuery Mobile pop-up functionality?

Prevent accordion expansion triggered by the More button click

Tips for incorporating a personalized CSS stylesheet while utilizing Bootstrap

What is the best way to adjust the size of the initial text field in a Bootstrap input group

How to customize a disabled paper-input element in Polymer 1.0?

Combining the jquery-UI slider functionality with the canvas rotate() method

Tips for creating a full screen div layout with fixed top and bottom navigation bars

Tips for ensuring that images fully occupy my carousel slides

When using Angular with mdbootstrap, the mdb-tabs directive will move to the end if the ngIf condition is true

What steps are needed to enable the keyboard on a Otree application for mobile devices?

The functionality of `onclick="location.href='link.html'" seems to be malfunctioning

The basic jQuery script seems to be malfunctioning