quarta-feira, 25 de abril de 2012

CSS : Menu horizontal com items de mesmo tamanho

Se você precisa de um menu horizontal cujos items fiquem do mesmo tamanho automaticamente sem precisar definir o 'width' deles, basta fazer assim:

  • Crie um menu



  • No css da página, escrevemos

ul {
  display: table;
  width: 100%;
  table-layout: fixed;

}

li { 
  display: table-cell; 
  /* Borda para facilitar a visualização do efeito. */
  border: 1px solid;
  text-align:center;  
}


O truque é o uso das propriedades "display:table"e "table-layout" para a tag "ul", e "display:table-cell" para tag "li". Outras opções podem ser acrescentadas, mas essa é o mínimo que vai precisar para o efeito desejado.
Até a próxima.