css - 删除之间的空格在弹性盒中

Question

这是我的代码：

* {
  margin: 0;
  padding: 0;
  font-family: "Arial";
  font-size: 30px;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.column {
  border-bottom: 1px solid black;
}

.column_content {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow-x: auto;
}

ul {
  white-space: nowrap;
  float: left;
}

ul li {
  display: inline-block;
  justify-content: flex-start;
}


/* Version Two */

#two ul li {
  float: left;
}

<!-- Version One -->

<div class="column">
  <div class="column_content">
    <ul>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
      <li>Fourth</li>
    </ul>
  </div>
</div>


<!-- Version Two -->

<div class="column">
  <div class="column_content" id="two">
    <ul>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
      <li>Fourth</li>
    </ul>
  </div>
</div>

我必须使用display: flex;，所以版本一是我想要使用的版本。但是文本块之间有空格。在第二版中，您可以看到没有这些空格的情况。

怎么可能删除它们，但保留所有其他设置？

谢谢！

标签： cssflexbox