Sorted list with next element on the right when it does not fit

Asked

Viewed 119 times

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, these jump to the right.

html css css3 menu submenu
  • 1

    could you give me more details, show me your code? We have an interesting resource similar to jsFiddle now in posts so [en.so], so we can see your code and help achieve the desired effect

1 answer

6


Only with CSS is it possible to use the properties 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 define overflow:hidden; in the container and apply the properties columns.

Ilustração do resultado no JSFiddle

  • 1

    Dude, I didn’t know this property either.

Browser other questions tagged html css css3 menu submenu

You are not signed in. Login or sign up in order to post.