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的大小。

所以你可以这样做

.li {
  位置：绝对;
  宽度：10px的;
  z-index：10;
  list-style：none;
  保证金：0;
  填充：2px;
  最大高度：20em;
  overflow-x：scroll;

}

并且内容大小必须大于10px。然后您可以查看scrool。

如何为html UL列表启用水平滚动条

3 个答案: