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
- Hack para IE6;
- Hack/script para IE7;
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.
01.<!-- abre listagem -->02.<ul>03.<li>04.<img src="imagens/listagem-item1.jpg" alt="Quadro em aquarela 1" />05.<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>06.</li>07.<li>08.<img src="imagens/listagem-item2.jpg" alt="Quadro em aquarela 2" />09.<p>Esse item é uma obra de arte fantástica em Aquarela 60x60px - por Kasper Jeppesen, 2010</p>10.</li>11.<li>12.<img src="imagens/listagem-item3.jpg" alt="Quadro em aquarela 3" />13.<p>Obra em Aquarela</p>14.</li>15.</ul>16.<!-- fecha listagem -->
E o CSS:
1.#limites ul { list-style: none; letter-spacing: -3px;}2.#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; }3.#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:
