如何实现ul中的li竖着平分div盒子？如图效果

问题遇到的现象和发生背景

问题相关代码，请勿粘贴截图

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

      <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
      </ul>
//---------------------------
<style scoped>
ul,li{
    padding: 0;
    margin: 0;
}
ul{
    width: 60px;
    height: 200px;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
li{
    list-style: none;
    width: 100%;
    border-bottom: solid 1px #333;
}
li:last-child{
    border-bottom: none;
}
</style>

li本来就是块级元素，你只要定好ul宽度，li宽度为100%就可以了

ul 的高度正好 可以被li整除就好了 。 比如 ul 90px li 有 9个 那就是li是10px
当然 百分比 也可以

li浮动是横的 默认是竖的 只需要给li添加样式就可以啦 --