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

あなたは、ディスプレイを追加しようとしている：a.pageLinkクラスにインライン

Answer 3

Overflow-xは、すべてのブラウザがすべてのCSS3機能を採用するのをまだ待っているので、最良の選択肢ではない可能性があります。

ユーザーエクスペリエンスの観点から、実際には13（またはそれ以上）のページ番号の結果が必要ですか？あなたがはいと判断した場合は、あなたのページネーションの結果をリストにして、リスにCSS宣言の表示を左浮動させることを検討します。

ブラウザの互換性について好き嫌いない場合white-space:nowrap

Answer 4

を考え、常に1行に表示されるようにあなたのリストを強制的に：

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

と私は同様white-space: nowrap;を示唆するつもりはなく、@Noelましたウォルターズはそれに私を打ち負かした。