How to change the floating list order horizontal to vertical

Question

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>

enter image description here

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

Not found solution ... :-( my requirement is not 2 columns http://i.stack.imgur.com/ehpV9.png it could be dynamic but i only need to change the float left to float down ... — Tahir, Jan 06 '15 at 12:29
http://jsfiddle.net/Fa722/423/ i have edited .. and solved it — Tahir, Jan 06 '15 at 12:59

score 3 · Answer 1 · edited Jan 06 '15 at 11:13

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.

score 2 · Answer 2 · answered Jan 06 '15 at 10:23

You could try this 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>

score 1 · Answer 3 · edited May 23 '17 at 11:46

Use column-count property of CSS3 appropriately and add a wrapping <div> to the <ul>.

Working Code Snippet:

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

Readup:

Also go over this answer.

If you vote to close a question please don't answer it. – Zach Saucier Jan 07 '15 at 03:35 — Zach Saucier, Jan 07 '15 at 03:35

How to change the floating list order horizontal to vertical

3 Answers3