将 li 元素与水平滚动并排放置 [重复]答案

【问题标题】：Put li elements side by side with horizontal scrolling [duplicate]将 li 元素与水平滚动并排放置 [重复]
【发布时间】：2015-10-20 08:39:39
【问题描述】：

我在这里使用 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。在我的小提琴里，元素正在闯入新的行列。我怎样才能让它们在单行中水平滚动。

【问题讨论】：

看看上面提到的重复，有一个解决方案可以帮助你

标签： html css pagination

【解决方案1】：

将您的第二个 UL 包装在 div 中，并将以下样式添加到该 div 请看这个小提琴 http://jsfiddle.net/arj2p4wb/

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

【讨论】：

【解决方案2】：

white-space

无包装 - 像正常一样折叠空格，但抑制文本中的换行符（文本换行）。

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

【讨论】：