Neste tutorial vamos mostrar como transformar uma lista HTML com CSS. Como a lista HTM é posicionada verticalmente, podemos altrerá-la para que fique posicionada horizontalmente. Isto é muito útil para construção de menus horizontais.

HTML

1. Primeiro criamos a <div> onde vai a nossa lista HTML.

<div class="faixa">
	<ul>
		<li><a href="/./">Casa</a></li>
    	<li>Apartamento</li>
    	<li>Chalé</li>
    	<li>Cabana</li>
    	<li>Sobrado</li>
	</ul>
</div> 

 Veja como ficam nossos elementos HTML sem estilos:

CSS

2. Agora vamos fazer a nossa lista ficar na posição horizontal. Para isto, utilizaremos o atributo "display: inline-block;" , ou seja, coloca a lista em um linha, mas mantendo o conteúdo como um bloco HTML:

.faixa ul li {
    display: inline-block;
    padding-right: 4px;
}

Onde:

• display - coloca o bloco lista em um linha;
• padding-right - define um espaço de 4px à direita para cada item da lista;

Observação: Os atributos CSS estão definidos para o elemento li apenas para a classe "faixa" (.faixa ul li {})

Resultado Final 

Veja agora a nossa lista HTML alinhada horizontalmente:

See the Pen WEaOQK by Angelo Luis Ferreira (@angeloalf) on CodePen.

TENTE VOCÊ MESMO

Veja no nosso editor HTML como foi feito o alinhamento horizontal de uma lista HTML. No editor, altere os códigos da forma que você desejar até conseguir o design desejado. Depois é só copiar os códigos e colar no seu projeto. Clique no link abaixo para abrir nosso editor de testes. (Não esqueça de clicar no botão "Executar" para visualizar os resultados).

Tente você mesmo »  

CÓDIGO COMPLETO DO EXEMPLO

Para copiar e colar nos seus projetos.

HTML

<div class="faixa">
	<ul>
	<li><a href="/./">Casa</a></li>
    	<li>Apartamento</li>
    	<li>Chalé</li>
    	<li>Cabana</li>
    	<li>Sobrado</li>
	</ul>
</div> 

 CSS

.faixa ul li {
    display: inline-block;
    padding-right: 4px;
}

COMENTÁRIOS