Artigos com o marcador lista

Lista de itens contornando imagem

15/04/10

Escrito por ed1nh0 em CSS

Já tentou fazer uma lista de itens (<ul>) contornar uma imagem? Simples. Um float:left (ou right) na própria imagem resolve de imediato.

lista de itens com list-style-type:square; contornando a imagem corretamente

E se os itens da lista (<li>) forem estilizados com alguma imagem de fundo, já viu o que acontece?

12/04/10

Escrito por ed1nh0 em CSS

Criar uma lista de itens é simples.

<ul>
  <li>Box 1</li>
  <li>Box 2</li>
  <li>Box 3</li>
</ul>

Para que os itens fiquem na horizontal você pode usar display:inline; ou float:left; nos itens e tudo certo.

Neste exemplo vou expôr um problema que me ocorreu há algum tempo: Um destaque de notícias de 3 em 3 em blocos em linha, com largura e altura fixa.

lista de itens contendo 3 box com largura e altura definidos e em linha