[Resolvido] lista display:table

[Daniel Kuroski 0]

Boa noite pessoal.

 

Em uma parte do layout que eu estou desenvolvendo eu recebo um array do banco de dados, percorro ele e para cada item eu crio um list-item.

 

Eles precisam ficar um do lado do outro (um layout horizontal), os itens tem que ter o mesmo tamanho, e como o resultado é dinâmico, eu preciso que independente de ter 1-2-3-4 itens eles devem estar sempre centralizados e ocupar o máximo de espaço possível.

 

Eu já consegui uma solução que é estilizar da seguinte forma

ul { width: 100%; display: table; table-layout: fixed; }
li { width: 100%; display: table-cell; float:none; }
ul li a { margin: 0; padding: 7px 0; width: 100%; text-align: center; } 

<ul>
   <li>
       <a href="#">Pizza</a>
   </li>
   <li>
       <a href="#">Burguer</a>
   </li>
</ul>

 

Porem o IE ferra com tudo, nem no IE10 abre direito... teria alguma outra forma de eu fazer isso ou vou ter que apelar e fazer uma tabela?

 

A imagem de cima é como abre em todos os navegadores.

E a de baixo é no IE10, o 9/8/7 abrem diferentes, mas o 7 pelo menos exibe todos os menus xD.

 

 

Obrigado para quem ajudar ^^ e também espero que seja a resposta para a dúvida de alguém

[André do Vale 76]

UL display: inline-block e width: 100%; LI float left, e width 25%. No A pode colocar um display block que irá ocupar toda a LI. :thumbsup:

[Daniel Kuroski 0]

UL display: inline-block e width: 100%; LI float left, e width 25%. No A pode colocar um display block que irá ocupar toda a LI. :thumbsup:

 

Valeu a resposta, de certa forma deu certo, porém eu não posso ter uma width fixa no <li>, eles devem ocupar sempre o maximo de espaço possivel, como eu tinha colocado na imagem inicial

 

[Paulo Mardson 1]

Você pode definir uma largura mínima para nao quebra o texto (opcional).

Não define largura, coloca um padding.

 

Acho que não vai rolar foi mal.

[Daniel Kuroski 0]

Você pode definir uma largura mínima para nao quebra o texto (opcional).

Não define largura, coloca um padding.

 

Acho que não vai rolar foi mal.

 

huahuauh vlu vlu ^^, mas acho que vou acabar mudando, vou usar tabela ao invés de lista... não sei se é a forma correta do uso da tabela, + pelo - solucionaria o problema.

[André do Vale 76]

Ao invés de recorrer a tabela, eu dou preferência pra alguns cálculos em JS, mais ou menos do tipo (largura pro li):

 

(100 / (quantidade de LI))+'%'

 

Só a "lógica" acima, mas basicamente pra 1 item fica 100%, pra 2 fica 50%, pra 3 fica 33.333...% etc etc etc.

[Edson Carli 0]

Concordo com André Campos ai em cima, já que o bug ocorre somente no IE é bem provável que o código esteja correto com o padrão W3C, amanhã ou depois até mesmo no IE passe a funcionar já que a MS tá correndo atrás de padrões agora.

 

Então acho que é uma boa resolver via Jquery até o IE resolver o problema, inclusive você pode deixar funcionando em todos e somente no IE você roda um script pra corrigir.

 

Inclusive coloque num arquivo chamado IEfix.js ou algo assim, pois é sempre comum você topar com estas situações. No futuro, quando a MS fizer seu trabalho, você apenas desliga esse script.

 

Fica a dica ;)

[Daniel Kuroski 0]

Ao invés de recorrer a tabela, eu dou preferência pra alguns cálculos em JS, mais ou menos do tipo (largura pro li):

 

(100 / (quantidade de LI))+'%'

 

Só a "lógica" acima, mas basicamente pra 1 item fica 100%, pra 2 fica 50%, pra 3 fica 33.333...% etc etc etc.

 

 

Concordo com André Campos ai em cima, já que o bug ocorre somente no IE é bem provável que o código esteja correto com o padrão W3C, amanhã ou depois até mesmo no IE passe a funcionar já que a MS tá correndo atrás de padrões agora.

 

Então acho que é uma boa resolver via Jquery até o IE resolver o problema, inclusive você pode deixar funcionando em todos e somente no IE você roda um script pra corrigir.

 

Inclusive coloque num arquivo chamado IEfix.js ou algo assim, pois é sempre comum você topar com estas situações. No futuro, quando a MS fizer seu trabalho, você apenas desliga esse script.

 

Fica a dica ;)

 

Beleza galera valeu, parece uma solução adequada, vou fazer um script simples que só rode caso seja IE, e vou fazer um calculo baseado no numero de resultados que vierem para setar a width dos LIS.

 

Amanhã eu posto o código para caso alguém precise.

 

Valeu mesmo pessoal =DD

[Daniel Kuroski 0]

Aqui está o código caso alguém precise

 

$(document).ready(function() {
   if ($.browser.msie) {
       var n = $("#ulId li").length;
       var total = parseInt(100/n);
       $('#ulId li').css("width",total.toString()+"%");
   }
});