Question

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

enter image description here

我在这里找到了解决方案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>。

工作代码段：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

读取：

另请查看this answer。

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

3 个答案: