O objetivo é dividir uma lista em colunas. Parece simples, mas existem algumas maneiras de fazer isso:
- float quebra a ordem de sua lista exibindo-a horizontalmente,
- A propriedade de colunas CSS3 não é compatível com o IE, enquanto os navegadores Firefox e webkit exigem seus prefixos,
- e, claro, você pode usar plug-ins JS.
Mas existe uma solução CSS3 pura, o exemplo mostra 3 colunas, cada uma contém no máximo 3 elementos:
ul li {
line-height: 20px;
}
ul li:nth-of-type(3n+4) {
margin-top: -60px;
}
ul li:nth-of-type(n+4) {
margin-left: 120px;
}
ul li:nth-of-type(n+7) {
margin-left: 240px;
}Divisão de código:
ul li {
line-height: 20px;
}Definindo a altura li .
ul li:nth-of-type(3n+4) {
margin-top: -60px;
}Mova cada 3 li para cima, começando com a 4ª, defina a margem para 3 vezes a altura de li .
ul li:nth-of-type(n+4) {
margin-left: 120px;
}
ul li:nth-of-type(n+7) {
margin-left: 240px;
}Mova a segunda e a terceira coluna para evitar a sobreposição.
Aqui está um violino
Funciona no IE9, Opera, Chrome, Safari e Firefox.