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

Answer 1

white-space

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

＆＃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;

Answer 2

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

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

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

2 个答案: