如何啓用HTML UL列表的水平滾動條

Question

我的列表如下css。我可以看到水平滾動條，但它被禁用。如何啓用它？

.li { 
    position: absolute; 
    z-index: 10; 
    list-style: none; 
    margin: 0; 
    padding: 2px; 
    max-height: 20em; 
    overflow-y: scroll; 
    overflow-x: scroll; 

    } 

.ul { 
    margin: 0; 
    padding: 0 4px; 
    border-radius: 2px; 
    max-width: 10em; 

    white-space: nowrap; 
    color: black; 
    cursor: pointer; 

    } 

請幫

Answer 1

你的滾動條實際上​​是disabled因爲你內容不溢出容器內。當您有更多內容在父容器中溢出時。它會自動工作（滾動將啓用）

li { 
    position: relative; 
    z-index: 10; 
    list-style: none; 
    margin: 0; 
    padding: 2px; 
    max-height: 50px; 
    overflow-y: scroll; 
    overflow-x: scroll; 
    } 

JS Fiddle Demo

PS：你也可以使用overflow:auto這說明父容器內的滾動條，只有當你的內容溢出。

Answer 2

你爲什麼寫「.li」和「.ul」？除非這些是你列表元素的類名，否則它們應該是「li」和「ul」（沒有句點），或者是相應的「li」和「ul」元素的類名。

Answer 3

首先，UL的高度必須大於UL的尺寸。

所以，你可以像

。李{
的位置是：絕對的;
width：10px;
z-index：10;
list-style：none;
margin：0;
padding：2px;
max-height：20em;
overflow-x：scroll;

}

和內容大小必須大於10px.Then您可以查看雙擊自動滾屏。