Html 如何将浮动列表顺序从水平更改为垂直

我需要将浮动列表顺序更改为垂直，请参见下面的代码

.pink_box{背景：粉色；显示：内联块；高度：110px；宽度：180px；}
.pink_box ul{列表样式：无；填充：0；边距：0；}
.pink_box ul li{文本对齐：居中；颜色：#fff；背景：无重复滚动0 0黑色；浮动：左侧；高度：15px；边距：0 2px 3px；
填充：0；
宽度：40px；
}

一,
二,
三,
四,
五,
六,
七,
八,

没有
浮动：向下

可能的方式：

1。绝对定位

2。Flexbox柱

ul{
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
  }

3。文本列：使项目内联块并使用CSS3文本列

ul{
   column-count: 2;
   column-gap: 0;
  }

li{
   display: inline-block;
  }

文本列在容器的宽度上是均匀分割的，因此如果您想非常具体地描述这些列的宽度，那么您必须明确描述容器的宽度

这与flexbox的不同之处在于，它将尝试尽可能平均地分割列中的元素。所以如果你不想，你不需要申报高度。从本质上讲，它试图使其尽可能短。
您可以尝试以下CSS3：

<style>
.pink_box{background: pink;display: inline-block;height: 110px;width: 180px;}
.pink_box ul{list-style:none; padding:0;margin:0; -moz-column-count: 2; -moz-column-gap: 4px;
-webkit-column-count: 2; -webkit-column-gap: 4px;  column-count: 2; column-gap: 2px;}
.pink_box ul li{text-align:center; color:#fff; background: none repeat scroll 0 0 black;
height: 15px;margin: 0 2px 3px;
padding: 0;  width: 40px;}
</style>


.pink_框{背景：粉色；显示：内联块；高度：110px；宽度：180px；}
.pink_box ul{list style:none；padding:0；margin:0；-moz列计数：2；-moz列间距：4px；
-webkit列计数：2；-webkit列间距：4px；列计数：2；列间距：2px；}
.pink_box ul li{文本对齐：居中；颜色：#fff；背景：无重复滚动0黑色；
高度：15px；边距：0 2px 3px；
填充：0；宽度：40px；}
适当使用CSS3的
列计数
属性，并在
中添加一个包装

工作代码片段：


.pink\u盒{
背景：粉红色；
高度：110px；
宽度：180px；
}
.pink_box.列表_容器{
宽度：81px；
}
.pink_box.列出容器ul{
列表样式：无；
填充：0；
保证金：0；
-webkit列数：2；
列数：2；
-webkit列间距：1px；/*Chrome、Safari、Opera*/
-moz列间距：1px；/*Firefox*/
柱间距：1px；
高度：110px；
}
.粉色包装箱.列出集装箱ul li{
文本对齐：居中；
颜色：#fff；
背景：无重复滚动0 0黑色；
高度：15px；
显示：内联块；
利润率：0.2px.3px；
填充：0；
宽度：40px；
}


一,
二,
三,
四,
五,
六,
七,
八,

找不到解决方案…：-（我的要求不是两列，它可能是动态的，但我只需要将左浮动改为向下浮动…我已编辑..并解决了它如果您投票关闭一个问题，请不要回答它。