É 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!
Tags: Código Limpo, CSS, HTML
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.