Se livrando do “.last” em uma listagem em blocos

É comum vermos desenvolvedores “sujando” o código html com uma classe “.last” em uma itens de lista para remover alguma formatação de margin ou padding que mantém o último item de uma linha onde deveria estar, e não na linha debaixo. Não entendeu? Vou desenhar – literalmente.

Nesta página temos uma lista comum, com três produtos, alinhados quase corretamente, mas existe um espaço perceptível do lado esquerdo, entre o começo da div de conteúdo e o começo da lista. Não viu? Dê uma olhada neste segundo exemplo.

O bloco de fundo verde é a área de conteúdo, o roxo é o conteúdo da lista e o amarelo é o item. Se você imaginar que esta lista está ao lado de alguma outra coluna, como um menu, etc., o último objeto ficará colado na coluna do lado esquerdo (ou direito, depende da sua especificação pra marge no css), ou o item vai para a linha debaixo.


Normalmente para resolver esse problema, os desenvolvedores utilizam os seguintes códigos:

  • Item 1
  • Item 2
  • Item 3
	li {
		width:300px;
		margin-right:20px;
	}
	li.last {
		margin-right:0;
	}

Aplicar uma classe ao último item da linha nem sempre pode ser fácil, pois você precisará de linhas de programação a mais parar gerar essa de 3 em 3 itens – ou mais, dependendo da quantidade de itens na linha – além do código não ser semanticamente correto.

Qual é a solução?

Aplicar uma margem negativa na LISTA. Se você segue um grid minimamente consistente, vai conseguir manter os items longe das colunas laterais e sem quebrar a linha.

No meu caso, adicionei uma margem negativa na lista, no valor da margem do li. Deixando a formatação como neste terceiro exemplo.

Repare no código:

	ul {background-color:#b970be;margin-left:-30px;}

É perceptível que a lista (roxo) está pra fora do conteúdo (verde), mas ela não afeta em nada o conteúdo do site (se você tiver um espaçamento/grid descente, é claro).

Se tiver alguma dúvida é só usar postar nos comentários.

Bom carnaval!

 
  • Demorei pra sacar essa da margem negativa na lista, só depois de muito tempo desenvolvendo que fui sacar essa.

    Formatar o :first-child de uma lista para ele ficar sem margem muitas vezes também é muito util.

    • Sim, dá pra usar o :first-child, mas se a lista tiver mais de uma linha, ele vai pegar só o primeiro item da lista, e não da linha.

  • Bruno Machado

    Ótima dica, funciona perfeito em quase todos os navegadores, exceto nosso amigo IE6, kkkkk infelizmente ainda preciso programar para deixar o site funcionando no mesmo.