overflow-x scroll无法正常工作

Question

https://jsfiddle.net/4psawf1h/7/

并且所有的时间表带都是不可移动的，并且li会进入一条新线，如何使用可移动的带子将它全部拉到一条线上。

这是css

div {
   background-color: blue;

}   


   ul { 
   position: absolute;
   border: 1px solid red;  
   overflow-x: scroll;
   width: 100vh;
}


ul > li {
   float: left;
   width: 156px;
}

这是模板html

<div>   
<ul> 
   <li>bxcbxcb cb</li>
   <li>1</li>
   <li>1</li>
   <li>bxcbxcb cb</li>
   <li>1</li>
   <li>1</li>
   <li>bxcbxcb cb</li>
   <li>1</li>
   <li>1</li>
   <li>bxcbxcb cb</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>bxcbxcb cb</li>
   <li>1</li>
   <li>1</li>
   <li>bxcbxcb cb</li>
   <li>1</li>
   <li>1</li>
   <li>bxcbxcb cb</li>
   <li>1</li>
   <li>1</li>
</ul>
</div>

Answer 1

试试这个css：

ul { 
   background-color: blue;
   position: absolute;
   border: 1px solid red;  
   overflow-x: scroll;
   width: 100vh;
   white-space:nowrap;
}
ul > li {
   display: inline;
   width: 156px;
}

<强>更新

试试这个：

ul > li {
       display: inline-table;
       width: 156px;
    }

希望这是你想要实现的目标！