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

这是我尝试过的小提琴链接。在我的小提琴中， li 元素正在闯入新行。我怎样才能让它们在单行中水平滚动。

Answer 1

空白

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>