Gerar colunas com CSS de uma lista sem tabelas

helldanger1 · Mai 19, 2009

Graças a esse truque de CSS você poderá gerar colunas com CSS utilizando uma lista e sem tabelas.
Por Pol Salvat

É um truque simples, porém engenhoso para fazer com que as listas mostrem-se em várias colunas. Nós colocamos três colunas, porém poderiam ser criadas quantas desejássemos.
Trata-se simplesmente de criar uma lista e definir com estilos CSS a largura de seus elementos. Definiremos a largura dos elementos <LI> como um 30% do total de largura da lista.

Os estilos CSS que colocaremos são os seguintes. Primeiro veremos o estilo para o qual é a lista <UL> e logo os dos elementos da lista <LI>:

UL.col3
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 15px 0px;
WIDTH: 100%;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
}

UL.col3 LI
{
PADDING-RIGHT: 2px;
DISPLAY: inline;
PADDING-LEFT: 2px;
FLOAT: left;
PADDING-BOTTOM: 2px;
WIDTH: 30%;
PADDING-TOP: 2px
}

helldanger1 · Mai 19, 2009

Para criar várias colunas em CSS define-se no estilo UL.col3 LI, onde o width é o tamanho de cada coluna. Assim automaticamente irão se criando as colunas. Como colocamos um 30%, o espaço onde esteja a lista se dividirá em três colunas, sem a necessidade de utilizar tabelas.

O HTML ficaria assim para a lista:

<ul class="col3">
<li>O que for</li>
<li>Segunda opcao</li>
<li>Terceira coisa</li>
<li>Outra coisa, que aparecerá na primeira coluna</li>
<li>Outra coisa para a segunda coluna</li>
<li>E isto para a terceira coluna</li>
</ul>

Gerar colunas com CSS de uma lista sem tabelas

helldanger1

GForum VIP

helldanger1

GForum VIP