Estou criando um menu onde terei vários botões. Para alinhar os botões eu uso uma lista ordenada simples. Quero saber se existe alguma forma de, quando não couber mais botões dentro da altura máxima do submenu, estes pularem para a direita.
1 Resposta
Apenas com CSS é possível recorrendo às propriedades columns
(Inglês):
/**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>
Nota: As formatações dadas é para ilustração visual, o importante é definir overflow:hidden;
no contentor e aplicar as propriedades columns
.
-
1