将li元素与水平滚动并排放置

时间:2015-07-29 11:29:46

标签: html css pagination

我正在使用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。在我的小提琴里,元素正在闯入新的界限。如何让它们以单行水平滚动。

2 个答案:

答案 0 :(得分:2)

white-space

  

nowrap -   像正常一样折叠空格,但是抑制文本中的换行符(文本换行)。

&#13;
&#13;
* {
  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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

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

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