我正在使用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。在我的小提琴里,元素正在闯入新的界限。如何让它们以单行水平滚动。
答案 0 :(得分:2)
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;
}
&#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;
答案 1 :(得分:0)
在Div中包装您的第二个UL并为该div添加以下样式 请看这个小提琴 http://jsfiddle.net/arj2p4wb/
div{
display: inline-block;
width: 200px;
overflow-y: hidden;
}