CSS div元素 - 如何僅顯示水平滾動條？

178

我有一個div容器中，如下定義它的風格：CSS div元素 - 如何僅顯示水平滾動條？

div#tbl-container 
{ 
    width: 600px; 
    overflow: auto;  
    scrollbar-base-color:#ffeaff 
}

這會自動給我的水平和垂直滾動條，一旦我填充我的表是由這個div包含。我只想讓水平滾動條自動出現。我將以編程方式修改表格的高度。

我該怎麼做？

來源

2008-11-03 Julius A

252

除非讓內容足夠大以便需要它們，否則不應同時獲得水平和垂直滾動條。

但是，您通常會在IE中執行某個錯誤。檢查其他瀏覽器（Firefox等），以確定它是否實際上只有IE正在執行此操作。

IE6-7（除其他瀏覽器）支持CSS3建議擴展獨立設置滾動條，你可以用它來抑制垂直滾動條：

overflow: auto; 
overflow-y: hidden;

您可能還需要增加對IE8：

-ms-overflow-y: hidden;

由於微軟威脅要將所有CR標準之前的屬性轉移到IE8標準模式下自己的「-ms」框中。（如果他們總是這樣做，這將是有意義的，但現在對每個人都是一個不便。）

另一方面，完全有可能IE8已經修復了錯誤。

來源

2008-11-03 11:35:23 bobince

哦上帝，你救了我的一天！雖然我還沒有嘗試ie-8規範。它現在可以FF和IE-7。這就是我需要的。再次感謝！ – 2009-11-06 07:16:43

Ooooh my！ IE瀏覽器......所有煩惱和頭痛的根源！ – 2010-01-19 06:42:48

這是我找到的最好的建議！最後，有人知道如何以非常容易理解的方式寫答案！謝謝！ – 2011-01-21 22:15:10

CSS3有overflow-x屬性，但我不期望對此有很好的支持。在CSS2所有你能做的就是設置一個通用的scroll政策並且工作你的widths和heights不要搞亂它們。

來源

2008-11-03 11:27:50 Gareth

，你也可以把它overflow: auto，並給予最大的固定的高度和寬度，這樣一來，當文本或無論是在那裏，溢出它會只顯示所需的滾動條

來源

2008-11-03 11:38:48 Tsundoku

同時顯示：

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;">  </div>

隱藏X軸：

<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;">  </div>

隱藏Y軸：

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;">  </div>

來源

2009-11-30 15:07:52

我還必須將white-space: nowrap;添加到樣式中，否則元素將包裝到我們將無法滾動到的區域中。

來源

2011-11-29 23:16:27 Hoby

`white-space：nowrap;`是關鍵，沒有它你的元素將堆疊/包裝。 – 2012-05-02 17:37:29

white-space：nowrap似乎無法在Firefox瀏覽器或Chrome瀏覽器上工作，即使使用div顯示器中的圖像：內聯或作爲塊 – 2012-06-27 00:31:27

我們應該設置爲overflow: auto並隱藏一個我們不用於處理不支持的CSS3瀏覽器的滾動條。看看這個CSS Overflow; XME.im

來源

2012-07-18 04:04:21 Guest

.box-author-txt {width:596px; float:left; padding:5px 0px 10px 10px; border:1px #dddddd solid; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; overflow-x: scroll; white-space: nowrap; overflow-y: hidden;} 


.box-author-txt ul{ vertical-align:top; height:auto; display: inline-block; white-space: nowrap; margin:0 9px 0 0; padding:0px;} 
.box-author-txt ul li{ list-style-type:none; width:140px; }

來源

2012-12-11 06:04:19 joginder

使用以下

<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;"> 
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >

來源

2013-06-19 21:24:25

該解決方案是沒有高度/寬度規格爲父親DIV因此它將響應來調整窗口大小，最實用的原因只有需要時纔會出現水平滾動條。

.container{ 
    padding:20px; 
    border:dotted 1px; 
    white-space:nowrap; 
    overflow-x:auto; 
} 

.box{ 
    width:100px; 
    height:180px; 
    background-color: red; 
    margin:10px; 
    display:inline-block 
}

看看DEMO

來源

2014-09-05 14:25:06 Marconi

我使用的CSS屬性： 1）「overflow-x: auto」; 2）「overflow-y: hidden」; 3）「white-space: nowrap」;

不要忘記爲容器和內部DIVS組件設置寬度。 屬性「white-space：nowrap」允許內部DIVS不會落在不同的線上。

考慮下面的HTML：

<div class="container"> 
    <div class="inner-1"></div> 
    <div class="inner-2"></div> 
    <div class="inner-3"></div> 
</div>

我用下面的CSS只具有一個水平滾動：

.container { 
    height: 80px; 
    width: 600px; 
    overflow-x: auto; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 
.inner-1,.inner-2,.inner-3 { 
    height: 60px; 
    max-width: 250px; 
display: inline-block; /* this should fix it */ 
}

小提琴：https://jsfiddle.net/qrjh93x8/（不與上面的代碼工作）

來源

2015-10-02 16:06:15

CSS div元素 - 如何僅顯示水平滾動條？

回答

相關問題