Div只有水平滾動

我有一個固定寬度的DIV，包含一個有很多列的表格，並且需要允許用戶在DIV內水平滾動表格。Div只有水平滾動

這隻需要在IE6和IE7（內部客戶端應用程序）上工作。

在IE7以下工作：

overflow-x: scroll;

任何人都可以用，在IE6以及有效的解決方案幫助嗎？

來源

2009-01-14 Richard Everett

overflow-x屬性在IE6中應該可以正常工作;你可能會有複雜的因素。你能發佈一個顯示問題的測試用例嗎？ – 2009-01-14 16:57:13

看起來我的問題在別處 - 我包含的DIV溢出到它的容器中。 – 2009-01-14 17:07:40

解決方案非常簡單。爲了確保我們不會影響表格中單元格的寬度，我們將關閉空白區域。爲了確保我們得到一個水平滾動條，我們將打開overflow-x。這幾乎是：

.container { 
    width: 30em; 
    overflow-x: auto; 
    white-space: nowrap; 
}

你可以看到the end-result here，或在下面的動畫中。如果表格確定容器的高度，則不需要明確地將overflow-y設置爲hidden。但明白這也是一種選擇。

來源

2009-01-14 16:43:21 Sampson

我錯過了`white-space：nowrap;`。奇蹟般有效！ – AndreFeijo 2017-07-03 01:55:29

overflow-x: scroll; 
overflow-y: hidden;

編輯：

它爲我的作品：

<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'> 
    <div style='width:400px;height:250px'></div> 
</div>

來源

2009-01-14 16:49:32

我不能讓所選答案的工作，但有點research後，我發現，橫向滾動div在css中必須有white-space: nowrap。

下面是完整的工作代碼：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Something</title> 
    <style type="text/css"> 
     #scrolly{ 
      width: 1000px; 
      height: 190px; 
      overflow: auto; 
      overflow-y: hidden; 
      margin: 0 auto; 
      white-space: nowrap 
     } 

     img{ 
      width: 300px; 
      height: 150px; 
      margin: 20px 10px; 
      display: inline; 
     } 
    </style> 
</head> 
<body> 
    <div id='scrolly'> 
     <img src='img/car.jpg'></img> 
     <img src='img/car.jpg'></img> 
     <img src='img/car.jpg'></img> 
     <img src='img/car.jpg'></img> 
     <img src='img/car.jpg'></img> 
     <img src='img/car.jpg'></img> 
    </div> 
</body> 
</html>

來源

2013-03-03 18:46:25

爲橫向滾動保持這兩個屬性記：

overflow-x:scroll; 
white-space: nowrap;

見工作環節：click me

HTML

<p>overflow:scroll</p> 
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.You can use the overflow property when you want  to have better control of the layout. The default value is visible.</div>

CSS

div.scroll 
{ 
background-color:#00FFFF; 
height:40px; 
overflow-x:scroll; 
white-space: nowrap; 
}

來源

2014-07-30 09:10:29 ankitd

Div只有水平滾動

回答

相關問題