How to change the order of a floating list horizontally to vertical
I need to reorder a floating list vertically, 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 a solution here http://jsfiddle.net/Fa722/423/
source to share
not float: down;
Possible ways:
1 . Absolute positioning
2 . Flexbox columns
ul{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
3 . Text columns: creating inline-block elements and using CSS3 text columns
ul{
column-count: 2;
column-gap: 0;
}
li{
display: inline-block;
}
The text columns are evenly spaced across the width of the container, so if you want to be very specific about the width of the columns, you will need to specify the width of the container.
The difference between this and Flexbox is that it will try to columnarise items in the same best way. So you don't need to declare the height if you don't want to. Basically, he tries to keep it as short as possible.
source to share
You can 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>
source to share
Use column-count
CSS3 property appropriately and add wrapper <div>
to <ul>
.
Snippet of working code:
.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>
Reading:
Also go to this answer .
source to share