如何将浮动列表顺序水平更改为垂直[重复]

Question

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

.pink_box{background: pink;display: inline-block;height: 110px;width: 180px;}
.pink_box ul{list-style:none;padding:0;margin:0;}
.pink_box ul li{text-align:center; color:#fff; background: none repeat scroll 0 0 black;float: left;height: 15px;margin: 0 2px 3px;
    padding: 0;
    width: 40px;
}

<div class="pink_box">
	<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>
</div>

我在这里找到了解决方案http://jsfiddle.net/Fa722/423/

Answer 1

没有float: down;

可能的方法：

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 的不同之处在于，它会尝试将元素尽可能平均地分割到各列中。因此，如果您不想声明高度，则无需声明。从本质上讲，它试图使其尽可能短。

Answer 2

你可以试试这个 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>

Answer 3

适当地使用 CSS3 的 column-count 属性并将包装 <div> 添加到 <ul>。

工作代码片段：

.pink_box{
  background: pink;
  height: 110px;
  width: 180px; 
}

.pink_box .list_container{
  width: 81px;
}

.pink_box .list_container ul{
  list-style:none;
  padding:0;
  margin:0; 
  -webkit-column-count: 2; 
  column-count: 2;
  -webkit-column-gap: 1px; /* Chrome, Safari, Opera */
  -moz-column-gap: 1px; /* Firefox */
  column-gap: 1px;
  height: 110px;
}
.pink_box .list_container ul li{
  text-align:center; 
  color:#fff; 
  background: none repeat scroll 0 0 black;
  height: 15px;
  display: inline-block; 
  margin: 0 2px 3px;
  padding: 0;
  width: 40px;
}

<div class="pink_box">
  <div class="list_container">
    <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>
  </div>
</div>

阅读：

• column-count CSS | MDN
• column-gap CSS | MDN

也请查看this answer。