Ordered list with next element to the right when it does not fit

Navigation
3

I am creating a menu where I will have several buttons. To align the buttons I use a simple ordered list. I want to know if there is any way that, when no more buttons fit within the maximum height of the submenu, they will jump to the right.

    
asked by anonymous 16.10.2014 / 14:23

1 answer

6

Only with CSS is it possible to use columns ( English) : 

/**CSS**/    
ol{
 height:100px;
 overflow:hidden;
 background: red;
 -webkit-column-count: 2;  -webkit-column-gap: 15px;
 -moz-column-count: 2;     -moz-column-gap: 15px;
 column-count: 2;          column-gap: 15px;
}
ol li{
 background: yellow;
 line-height:18px;
 margin-bottom:2px;
}
/**HTML**/
<ol>
<li>Opção 1</li>
<li>Opção 2</li>
<li>Opção 3</li>
<li>Opção 4</li>
<li>Opção 5</li>
<li>Opção 6</li>
<li>Opção 7</li>
<li>Opção 8</li>
</ol>

Note: The given formatting is for visual illustration, the important thing is to set overflow:hidden; in the container and apply the columns properties.

    
16.10.2014 / 15:02
How to add and search BD products with JSON in HTML dynamic fields? Ajax request is not working