Поместите элементы li рядом с горизонтальной прокруткой

Question

Я создаю пейджинговый эффект, используя css здесь, я смущен. Я хочу установить все элементы li рядом друг с другом, указав ширину родительского элемента таким образом, чтобы все элементы li прокручивались по горизонтали.

  <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> 

А вот скрипка link, которую я пробовал. В моей скрипке элементы li ломаются в новую линию. Как я могу заставить их прокручивать по горизонтали в одну строку.

Answer 1

Оберните второй UL в Div и добавьте следующий стиль этого DIV см эту скрипку http://jsfiddle.net/arj2p4wb/

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

Answer 2

white-space

Nowrap - коллапсирует пробельные как для нормальной, но подавляет разрывы строк (перенос текста) в тексте.

* { 
 
    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>