如何在頁面上進行水平滾動

我在div中放置了內部div，我需要使所有內部div都行，並且應該顯示水平滾動條（我知道這聽起來很瘋狂，但我需要）。我試過容器寬度自動和溢出滾動，但沒有。如何在頁面上進行水平滾動

如何做到這一點？

我的標記：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>text-overflow</title> 
    <style> 
    body{ 
    width: auto; 
    } 
    #items{ 
    overflow-x: scroll; 
    width: auto; 
    } 
    .item{ 
    display: inline-block; 
    width: 400px; 
    height: 100px; 
    border:1px solid; 
    } 
    </style> 
</head> 
<body> 

     <div id="items"> 
      <div class="item"> 
      Item content 
      </div> 
      <div class="item"> 
      Item content 
      </div> 
      <div class="item"> 
      Item content 
      </div> 
      <div class="item"> 
      Item content 
      </div> 
      <div class="item"> 
      Item content 
      </div> 
      <div class="item"> 
      Item content 
      </div> 
     </div> 

</body> 
</html>

來源

2012-11-14 testCoder

使用white-space: nowrap;上#items

#items{ 
    overflow-x: scroll; 
    width: auto; 
    white-space: nowrap; 
}

DEMO

來源

2012-11-14 12:47:58

非常感謝你。 – testCoder

不客氣。 –

乾脆放棄#items高度和溢出-X：自動。

#items{ 
     overflow-x: auto; 
     width: auto; 
     height: 200px; 
     }

來源

2012-11-14 12:51:26 brightboy2004

這將無法正常工作http://jsfiddle.net/Bhjvg/1/ –

檢查橫向滾動只是給寬度：300px到#items而不是寬度：自動。 – brightboy2004

nope - http://jsfiddle.net/Bhjvg/2/仔細閱讀操作系統要求*「我需要製作所有內部** **」* –

<div style="overflow-x:scroll;"> 
    <div style="width:1600px;"> 
    <div style="width:1500px;"> 
     <table> 
     <tr> 
      <td> your value <td> 
     </tr> 
     </table 
    </div> 
    </div> 
</div>

來源

2013-11-23 22:37:17 test

如何在頁面上進行水平滾動

回答

相關問題