Ontem, no final da tarde, respondi a uma pergunta interessante sobre como criar uma lista "`<li>`" horizontal que se ajusta a 100% ao tamanho da largura da `div` parent. Então eu decidi publicar aqui também a resposta de como fazer isso sem estar a calcular o tamanho da largura de cada `item` fazendo uso de percentagens e/ou `media queries`, para tornar esta responsiva a todas as resoluções e tamanhos de ecrãs.
Então como criar uma lista que se ajusta a 100% da largura da `div` parente?
Se fossemos a fazer isto normalmente usando percentagens, teríamos que fazer a conta:
100 (que seria 100% o tamanho da div parent) a divir pelo número de items que a nossa lista tem no total. Exemplo:
```
100 a dividir por 4 = 25
```
Que será:
```
100% o tamanho da largura da div parent a dividir por 4 items = 25%
```
Então a largura para as 4 divs ocuparem a 100% a largura da `div` parent será de - `width:25%;` para cada item. Ao criarmos o nosso código CSS e HTML, seria algo como:
```
<ul id="lista">
<li class="item">item 1</li>
<li class="item">item 2</li>
<li class="item">item 3</li>
<li class="item">item 4</li>
</ul>
```
```
.item {width:25%; display:inline-block;}
```
Mas caso quiséssemos remover um dos itens em ecrãs de pequenas resoluções como por exemplo telemóveis, teríamos que calcular novamente o valor do tamanho da largura para ajustar a lista de maneira a ocupar a 100% a largura do parent. Então agora essa conta seria de - `100 a dividir por 3`.
Então aqui está uma solução para que não tenhamos que calcular a largura de cada item cada vez que queiramos fazer alguma modificação.
Lista horizontal responsiva utilizando o hack da `table-layout: fixed;`
Primeiro vamos transformar esta lista numa tabela para que este "hack" funcione. Depois iremos atribuir-lhe a propriedade: `table-layout: fixed;`.
O `table-layout: fixed;` utiliza o algoritmo de uma tabela fixa que por sua vez calcula a disposição horizontal da tabela baseando-se apenas na largura da tabela e na largura das colunas, não do conteúdo das colunas em si, fazendo-as assim todas iguais no tamanho da sua largura independentemente da resolução ou tamanho do ecrã.
Eis um exemplo online no jsFiddle, aumente ou diminua o tamanho da janela do resultado para ver este código em ação:
► https://jsfiddle.net/z3wc4cbg/
```
<ul id="lista">
<li class="item yellowgreen"><a href="#">Início</a></li>
<li class="item tomato"><a href="#">Página</a></li>
<li class="item royalblue"><a href="#">Blog</a></li>
<li class="item turquoise"><a href="#">Contacto</a></li>
</ul>
```
```
#lista {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
display: table; /* Transforma a div numa tabela */
table-layout: fixed; /* Utiliza o algoritmo de uma table fixed */
border-collapse: separate; /* Colapsa a tabela para poder adicionar o espaçamento */
border-spacing: 5px 0px; /* Adiciona o espaçamento */
}
/* Cria uma lista horizontal com espaçamento */
.item {
display: table-cell;
}
/* Estilo para os links dos botões */
.item a {
display:block;
height: 50px;
line-height: 50px;
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
text-decoration: none;
}
/* Cor para cada botão */
.yellowgreen {background-color:yellowgreen;}
.tomato {background-color:tomato;}
.royalblue {background-color:royalblue;}
.turquoise {background-color:turquoise;}
/* <li class="turquoise"> responsável pelo "Contacto" não será apresentada em ecrãs maiores que 600px */
@media (min-width: 600px) {
.turquoise {
display: none;
}
}
```