Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Última modificação: 12 abril 2011

Listagem horizontal onde os itens de lista vão ficar sempre com tamanho igual (se baseando na altura do maior dos itens): utilizando somente HTML e CSS.

Seria uma listagem no modelo da Americanas.com e Submarino – Porém quando verifiquei o código desses sites vi que não era o ideal, pois utilizam um monte de ULs separadas para cada linha: sendo que deveria ser somente 1.

Pontos positivos – Lista com Display Inline-block

  • Todos itens da linha se adaptam ao tamanho do maior;
  • Sem float: sem preoupações com clear, contemfloat, etc;
  • Possível listar tudo utilizando somente uma UL;

Pontos negativos – Suporte

Veja o exemplo de como vai ficar: Listagem horizontal com itens de mesma altura.

Código HTML

Somente uma listagem UL com items LI contendo uma imagem e um parágrafo.

  <!-- abre listagem -->
    <ul>
      <li>
        <img src="imagens/listagem-item1.jpg" alt="Quadro em aquarela 1" />
        <p>Quadro em Aquarela 60x60px. Pode ser comprado em até <strong>6x no cartão</strong> ou à vista com desconto de <strong>50%</strong> - por Kasper Jeppesen, 2010</p>
      </li>
      <li>
        <img src="imagens/listagem-item2.jpg" alt="Quadro em aquarela 2" />
        <p>Esse item é uma obra de arte fantástica em Aquarela 60x60px - por Kasper Jeppesen, 2010</p>
      </li>
      <li>
        <img src="imagens/listagem-item3.jpg" alt="Quadro em aquarela 3" />
        <p>Obra em Aquarela</p>
      </li>
    </ul>
    <!-- fecha listagem -->

E o CSS:

  #limites ul { list-style: none; letter-spacing: -3px;}
  #limites ul li { display: inline-block; width: 100px; margin: 10px 0; padding: 20px; border-top: 1px #fff solid; text-align: center; vertical-align: top; letter-spacing: normal; zoom: 1; }
  #limites ul li p { text-align: left; }
  • Letter-spacing com valor negativo na UL, pois o display insere automaticamente alguns pixels de margem entre os elementos. Esse valor é zerado novamente no LI (normal).
  • Todos itens se alinham ao topo
  • Paddings com a borda simulam a união dos elementos

Se for testar nos IEs até agora, vai encontrar um BUG como esse:

Quebra de layout nos IEs

Quebra de layout nos IEs

O quadro vermelho indica a quebra, pois esses navegadores não suportam o DISPLAY inline-block corretamente.

Não se preocupe – para concertar isso é só usar um hack para o IE6:

  * html #limites ul li { display: inline; }

E um ajuste para o IE7 – em um CSS separado (se não lembra como fazer, é bom dar uma lida em Conditional comments para Internet Explorer:

  #limites ul li { display: inline; }

Pronto.
Temos uma lista semanticamente correta onde cada linha se adapta ao conteúdo do maior elemento.

5 comentários

Responder
  1. 13 de agosto de 2010

    Carlitos disse:

    Excelente post!

    Acredito que também temos a opção de não usar os hacks para IE, utilizando display: inline no <li> em todos os browsers.

    A única questão é que teremos de colocar uma <div> envolvendo todo o conteúdo do <li> com display: inline-block.

    Não testei, mas acho que isso seja possível também 🙂

  2. 14 de agosto de 2010

    Gabriel Santana disse:

    Valeu. De vez em quando tenho problemas na altura variáveis de listas como essa.

  3. 23 de agosto de 2010

    danilo disse:

    olá, parabéns pelo blog, acabei de conhecer, gostei das matérias, pra mim que estou começando é uma boa…abraço.

  4. 3 de setembro de 2010

    Caverna disse:

    Caros, existe algum post espcífico que vocês já tenham listado os principais problemas relacionados a Web Standards e IE8 ?

  5. 6 de maio de 2015

    Mauricio disse:

    Ótimo post, parabéns.

Escreva seu comentário