一、ul内容超出宽度时,可以横向滚动,并隐藏滚动条
ul {
height: auto;
overflow: hidden;
overflow-x: auto; /* 设置x轴可滑动 */
white-space: nowrap; /* 元素不换行 */
width: auto; /* (宽度) */
}
/* 隐藏滚动条 */
ul::-webkit-scrollbar {
display: none;
}
ul li {
height: 0.6rem;
font-size: 0.32rem;
color: #282828;
/* 让所有的li在一行 注意这里不能用float:left 因为设置float后里超过一屏后会自动换行 */
display: inline-block;
width: 1.6rem !important;
text-align: center;
}
二、设置滚动条样式
/* 滚动条样式*/
.multiple_choices::-webkit-scrollbar{
width: 2px;
background-color: #8B8B8B;
}
.multiple_choices::-webkit-scrollbar-track{
background-color: #8B8B8B;
}
.multiple_choices::-webkit-scrollbar-thumb{
background-color: #ffffff;
}
三、设置超出高度时显示纵轴滚动条,而不超出高度时不显示滚动条
.box{
height: 200px; /* 设置容器的高度 */
overflow-y: auto; /* 当内容超出容器高度时显示纵轴滚动条 */
}