如何为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"one_answers"。ul"?除非这些是列表元素的类名，否则它们要么只是"li"one_answers"ul"(不带句号)，要么是各自的"li"one_answers"ul"元素的类名。

Answer 3

首先，UL的高度必须大于UL的大小。

所以你可以这样写

。
位置:绝对的,
宽度:10 px;
z - index: 10;
list-style:没有;
保证金:0;
填充:2 px;
max-height: 20 em;
overflow-x:滚动;

}

，内容大小必须大于10px。然后你可以查看学校