Menu horizontal CSS - igualmente espaçado?

Question

Eu tenho um menu CSS padrão, feito com tags UL e LI. Eu preciso que eles abranjam a página inteira, horizontalmente (não o meu caso real, mas vou levar isso para simplificar a situação). No entanto, os itens são criados dinamicamente e, portanto, não consigo codificar nenhum com itens de LI, nem margens.

Vi soluções usando o JavaScript para definir esses valores, mas eu realmente adoraria evitá -los.

Por fim, eu vi uma solução muito boa que está definindo

#menu {
    width: 100%;
    /* etc */
}
#menu ul {
    display: table;
}
#menu ul li {
    display: table-cell;
}

Isso criará o comportamento desejado na maioria dos navegadores ... exceto no IE.

Alguma ideia?

EDIT: Obrigado pelas respostas. No entanto, como o código que gera os itens não é meu, não consigo definir estilos embutidos ao criá -los sem usar o JavaScript posteriormente.

Answer 1

Você não pode definir a altura ou largura de um elemento embutido. http://www.w3.org/tr/css2/visudet.html#inline-width

Tentar display:inline-block;

Aqui está a correção para o IE:

display:inline-block;
zoom:1;
*display:inline;

Answer 2

Se você quiser deixar o elemento obter todo o espaço disponível, não há necessidade de definir a priori A largura dos elementos do menu (é claro, ajudará a dimensionar igualmente os elementos LI). Você pode resolver esse problema trabalhando no display propriedade.

#menu{
  display: table;
  width: 100%;
}

#menu > ul {
  display: table-row;
  width: 100%;
}

#menu > ul >li {
  display: table-cell;
  width:1%
}

Observe que width:1% É necessário para evitar o colapso celular.

Answer 3

Se os itens do seu menu estiverem sendo gerados dinamicamente (para que você não saiba quantas lá será anterior), então você pode adicionar um style="width:xx" atributo ao lis (ou em <style> no topo ... ou onde quer que você, realmente). Onde xx deve ser por width_of_parent_div_in_px/number_of_elements+'px', ou 100/number_of_elements+'%'. o lis também deve ser block-elementos de nível e floated left.

Answer 4

#menu ul li {
    float: left;
    clear: none;
    display: inline;
    padding: 10px;
    height: 25px; //how tall you want them to be
    width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}

A largura: 18% pode estar certa se você tiver 5 elementos, representando a fronteira e o preenchimento. Mas variará devido a quantos elementos você tem, quanto preenchimento etc.

Answer 5

Se você está aberto a usar o Flexbox, não é difícil de fazer. Crédito total pelo código que estou prestes a postar vai para Truques CSS Como este é o seu CSS.

Abaixo está um exemplo que inclui prefixos de fornecedores.

#menu{
  
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
  
 }

<ul id="menu">
  <li>Home</li>
  <li>Store</li>
  <li>Blog</li>
  <li>About</li>
  <li>Contact</li>
</ul>

O único problema com o Flexbox é se você precisar suportar o IE 9 e abaixo, caso contrário, não vejo razão para não usar o Flexbox. Você pode Veja o suporte do navegador para o Flexbox aqui.

Answer 6

Aqui está o que funcionou para mim:

#menu{
    height:31px;
    width:930px;
    margin:0 auto;
    padding:3px 0px 0px 90px;
    color:#FFF;
    font-size:11px;
}
#menu ul{
    display:inline;
    width:930px;
    margin: 0 auto;
}
#menu ul li{
    list-style:none;
    padding:0px 0px 0px 0px;
    display:inline;
    float:left;
    width:155px;
}