Q:

How to change the floating list order horizontal to vertical

I need to change the floating list order to vertical please see my code below

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

I found the solution here http://jsfiddle.net/Fa722/423/

A:

there is no float: down;
Possible ways:
1. Absolute positioning
2. Flexbox columns
ul{
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
  }

3. Text columns: making the items inline-block and using CSS3 text columns
ul{
   column-count: 2;
   column-gap: 0;
  }

li{
   display: inline-block;
  }

Text columns are evenly split across the width of the container, so if you want to be very specific about those column widths you'll have to be specific about the width of the container.
A difference between this and flexbox is that it will try and split the elements across the columns equally the best it can. So you don't need to declare a height if you don't want to. Essentially it tries to make it as short as possible.

