[Resolvido] Dividir LI

[mbb 0]

Pessoal, não conheço muito de css e queria colocar minha lista em <UL> :

 

<div id="xx">
<ul>
<li>teste 1 </li>
<li>teste 2 </li>
<li>teste 3 </li>
<li>teste 4 </li>
<li>teste 5 </li>
<li>teste 6 </li>
</ul>
</div>

 

Na exibição ela ira ficar uma lista normal, mas preciso que ela fique em duas colunas...

EXP:

---------------

Teste 1 Teste 4

Teste 2 Teste 5

Teste 3 Teste 6

----------------

Como faria isso em CSS , não tenho como alterar a programação que gera a informação ...

 

Abs,

Mbb

[Jonathan Djavan 2]

Não entendi direito o que você quer fazer. Mas se entendi você quer por uma do lado da outra. Ou você vai no css do "li" e coloca display:block; e flot:left; e dar as "margin"s do seu jeito. Ou coloca display:inline; e da suas "margin"s pelo o que entendi acho que é isso.

[Bruno Augusto 417]

Eu acho que o máximo que vai conseguir é desse jeito:

 

Teste 1 Teste 2
Teste 3 Teste 4
Teste 5 Teste 6

A técnica seria mesma usada para menus horizontais. "Quebrar" para a linha de baixo é comportamento padrão quando a largura do conatiner-pai for alcançada pela soma das larguras dos elementos filhos (os <LI>'s).

[André do Vale 76]

Há 3 maneiras pra resolver isso. 2 na raça, e 1 com javascript.

 

Na 1ª você pode reorganizar na mão os itens da sua lista e fazê-la na ordem em que apareça conforme o float já citado pelos colegas acima.

 

Na 2ª, você trabalha com margens (negativa no topo, e largura da 1ª coluna pra margem esquerda), e posiciona a partir do 1º elemento da coluna da direita.

 

E por último, com javascript, onde você pode reordenar os itens conforme desejar (lembrando sempre que o float funciona conforme já citado nas respostas acima). :thumbsup:

[Jonathan Djavan 2]

André acho que com JavaScript ele não vai conseguir não, ele falou que era iniciante, então acho que o jeito mais fácil para ele é com o css básico, definir uma div com tamanho fixo e usar o flot e o display:block; pra organizar.

[André do Vale 76]

Bom, com js seria até mais simples. Ele poderia contar os itens da lista, dividir por dois, arredondar pra cima (caso a lista tenha número impar), os itens além do número arredondado ele joga pra outra lista que flutua ao lado da original que fora recortada. :thumbsup:

 

De qualquer forma, segue um artigo bem antigo que é justamente sobre a situação proposta: http://www.alistapart.com/articles/multicolumnlists

[JCMais 75]

<ul id="multicolumn">
   <li>teste 1 </li>
   <li>teste 2 </li>
   <li>teste 3 </li>
   <li>teste 4 </li>
   <li>teste 5 </li>
   <li>teste 6 </li>
</ul>

 

#multicolumn {
   -webkit-column-count: 2;
   -moz-column-count: 2;
   column-count: 2;
   width: 300px;
}

#multicolumn li {
   margin-left: 25px;
}

 

http://jsfiddle.net/JCMais/rjwYS/ :seta: http://caniuse.com/multicolumn

[André do Vale 76]

@JCMais, infelizmente não funciona IE9-.

[Jonathan Djavan 2]

Depois falaram que eu estava errado que css3 não pega em todos os browsers.

[JCMais 75]

O usuário perguntou como fazer com CSS, e não definiu no tópico se precisava de compatibilidade para navegador X, apenas dei uma sugestão de como fazer, ninguém têm obrigação de usá-la.

 

Eu sei que não é aceito em todos os navegadores, motivo pelo qual deixei o link na própria postagem para o site caniuse. :thumbsup: