CSS水平滚动（简单）

Question

鉴于：

        <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;
}

如何阻止链接向下溢出？我希望它们仅溢出-x（已在CSS中指定），以便水平滚动条发挥作用。

干杯!

Answer 1

您需要添加

white-space:nowrap;

浏览器似乎并不都同意此属性的继承，因此请尝试将其添加到两个 css 规则中。

Answer 2

您是否尝试过将 display:inline 添加到 a.pageLink 类中

Answer 3

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

从用户体验的角度来看，您真的需要 13 个（或更多）分页结果吗？如果你决定是，那么我会考虑将你的分页结果放入一个列表中，并使用 css 声明 display:inline; 使 li 左浮动。

要强制您的列表始终显示在一行上，请考虑 white-space:nowrap

Answer 4

如果您对浏览器兼容性不挑剔：

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

我也打算建议 white-space: nowrap; 但 @Noel Walters 打败了我。