我需要幫助試圖讓一個div只有水平滾動條

可能重複：
CSS - use a horizontal scrollbar only 我需要幫助試圖讓一個div只有水平滾動條

我還是比較新的，使用HTML，但我試圖做一個佈局，我想要一個寬度爲370px×199px的div作爲高度，我只想要水平滾動條。

這是我正在使用的代碼。

<div class="camodule" style="position: absolute; left: 727px; top:202px; width: 370px; height:199px; overflow: auto;"> 
    Images that go here are (h)199px by (w)119px 
</div>

我需要做什麼來改變只有有水平滾動條？

[編輯]我應該說，我有不同的大小框，只希望兩個框水平滾動。我想要將（h）199px（w）119px的圖片合併到一起，我試圖通過將多個圖像（6）彼此相鄰來修復它。但是當我查看內容時，它只顯示了我放入div的6張圖片中的3張。

這是整個代碼，我試圖用它來滾動所有內容，比如6張圖片等。

這是代碼exact code我目前正在使用，正如您所看到的，它不起作用。我希望它只有兩個框的滾動條，而不是所有的框都是不同的大小。我已經看到了我正在努力實現的目標，所以我知道它必須如何工作。

來源

2012-09-17 user1676450

您需要將內部潛水設置爲比外部div更長，然後獨立設置overflow-x和overflow-y屬性（同時刪除現有的溢出規則）。

jsFiddle example

<div class="camodule" style="position: absolute; left: 10px; top:10px; width: 370px; height:199px;-ms-overflow-x: auto; overflow-x: auto;overflow-y:hidden;-ms-overflow-y: hidden; "><div style="width:1000px">Your long content here.</div></div>

來源

2012-09-17 01:34:22 j08691

你應該能夠改變溢出overflow-x: scroll; overflow-y: hidden;一些瀏覽器可能仍然顯示在y滾動，但它會顯示爲灰色。

來源

2012-09-17 01:35:40 user1676262

HTML

<div class="camodule" style="overflow-x: hidden; overflow-y: scroll; position: absolute; left: 727px; top:202px; width: 370px; height:199px;"></div>

overflow-x控制水平滾動和overflow-y控制垂直的屬性。

它也更容易在一個樣式表CSS或使用樣式標籤的工作：

.camodule {  
    overflow-x: hidden; 
    overflow-y: scroll; 
    position: absolute; 
    left: 727px; 
    top:202px; 
    width: 370px; 
    height: 199px;  
}

來源

2012-09-17 01:42:51 iambriansreed

你或許應該切換你的CSS它外部樣式表也是如此。 Example here。

HTML

<div class="camodule"> 
    <div class="camoduleContent"> 
     Content That Scrolls 
    </div> 
</div>

CSS

.camodule{ 
    position: absolute; 
    left: 10px; 
    top:10px; 
    width: 370px; 
    height:199px; 
    -ms-overflow-x: auto; 
    overflow-x: auto; 
    overflow-y:hidden 
} 
.camoduleContent{ 
    width:1000px; 
}

來源

2012-09-17 01:57:02 DACrosby

我需要幫助試圖讓一個div只有水平滾動條

回答

相關問題