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水平滾動（簡單）

回答

相關問題