如何使水平滚动div中UL具有全宽度

<style>
  .scrollable-div {
    width: 100%;
    overflow-x: scroll;
  }
  
  .scrollable-ul {
    white-space: nowrap;
    width: 200%; /* 设置ul的宽度为内容宽度的总和 */
  }
  
  .scrollable-li {
    display: inline-block;
    width: 50%; /* 设置li的宽度为50% */
  }
</style>

<div class="scrollable-div">
  <ul class="scrollable-ul">
    <li class="scrollable-li">Item 1</li>
    <li class="scrollable-li">Item 2</li>
    <li class="scrollable-li">Item 3</li>
    <li class="scrollable-li">Item 4</li>
    <li class="scrollable-li">Item 5</li>
    <li class="scrollable-li">Item 6</li>
    <!-- 添加更多的li元素 -->
  </ul>
</div>