CSS水平滚动（简单）

鉴于：CSS水平滚动（简单）

 <div class="pageNavWrap"> 
      <a class="pageLink" href="#">1</a> 
      <a class="pageLink" href="#">2</a> 
      <a class="pageLink" href="#">3</a> 
      <a class="pageLink" href="#">4</a> 
      <a class="pageLink" href="#">5</a> 
      <a class="pageLink" href="#">6</a> 
      <a class="pageLink" href="#">7</a> 
      <a class="pageLink" href="#">8</a> 
      <a class="pageLink" href="#">9</a> 
      <a class="pageLink" href="#">10</a> 
      <a class="pageLink" href="#">11</a> 
      <a class="pageLink" href="#">12</a> 
      <a class="pageLink" href="#">13</a> 
     </div>

有了：

.pageNavWrap{ 
    background-color:#666; 
    text-align:center; 
    font-size:16px; 
    overflow-x:scroll; 
} 
a.pageLink{ 
    color:White; 
    padding-left:10px; 
    padding-right:10px; 
    padding-top:5px; 
    padding-bottom:5px; 
}

如何停止的链接向下溢出？我希望它们只能溢出（在CSS中已经指定），以便水平滚动条进入游戏。

干杯！

来源

2011-02-01 Tom Gullen

您需要给div一个宽度 – sunn0 2011-02-01 17:23:21

@sunn div占用了容器中剩余的空间，这是不可能的。 – 2011-02-01 17:24:44

你需要添加

white-space:nowrap;

浏览器不是所有似乎同意关于这个属性继承，以便尝试将其添加到这两个CSS规则。

来源

2011-02-01 17:25:51

你尝试加入显示：内联到a.pageLink类

来源

2011-02-01 17:21:08

没有运气对不起，没有工作 – 2011-02-01 17:22:49

Overflow-x可能不是最好的选择，因为我们仍在等待所有浏览器采用所有CSS3功能。

从用户体验的角度来看，你真的需要13个（或更多）的分页结果吗？如果你决定是的话，那么我会考虑把你的分页结果放到一个列表中，并用css声明显示左键浮动li：inline;

要强制列表始终出现在同一行，考虑white-space:nowrap

来源

2011-02-01 17:26:42 Bryan

如果你不挑剔浏览器的兼容性：

.pageNavWrap 
{ 
    display: table-row; 
} 
.pageLink 
{ 
    display: table-cell; 
}

，我要建议white-space: nowrap;很好，但@Noel沃尔特斯打败了我。

来源

2011-02-01 17:27:01 zzzzBov

CSS水平滚动（简单）

回答

相关问题