Como construir listas horizontais para HTML5 e CSS3 Programação

Às vezes, você quer barras de botões horizontais. Como as listas HTML5 tendem a ser vertical, você pode ser tentado a pensar que uma lista horizontal é impossível. Na verdade, CSS3 fornece tudo que você precisa para converter exatamente o mesmo HTML para uma lista horizontal.

Não há nenhuma necessidade de mostrar o HTML novamente, porque ele não mudou em nada. (Não é CSS Grand?) Mesmo o CSS não mudou muito:

#menu ul {margin-left: -2.5em -} # Menu li {list-style-type: none; width: 7em-text-align: center-float: left;} # menu a {text-decoration: none; color: black-display: block-background-color: # EEEEFF-box-shadow: 5px 5px 5px cinza-margin-bottom: 2px; margin-right: 2px; border-radius: 5px; border: 3px início # EEEEFF-} #menu a: hover {background-color: # DDDDEE-box-shadow: 3px 3px 3px cinza-border: none;}

As modificações são incrivelmente simples:

1. Flutuar cada item da lista, dando a cada li uma float: left valor:

   #menu li {list-style-type: none; float: left; width: 5em-text-align: center,}

2. Mova o margin-left da totalidade ul tomando o margin-left formatação do li elementos e transferi-lo para o ul:

   #menu ul {margin-left: -2.5em-}

3. Adicionar uma margem direita.

   Agora que a barra de botões é horizontal, adicione um pouco de espaço para a direita de cada botão para que eles não parecem tão cheia juntos:

   margin-right: 2px;