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:


  • Casa
  • Apartamento
  • Chalé
  • Cabana
  • Sobrado

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 os elementos ul e 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

Blog Visual Dicas

Visual Dicas - A sua fonte de informação!

Controle o seu mundo com pro Conheça o nosso blog Visual Dicas, onde apresentamos dicas de Informática, Internet, Blogs, Software, Hardware, Tecnologia, Gestão Empresarial, RH, Treinamento e Cursos Online.

Visual Dicas

Squids Arduino

Controle o seu mundo com projetos e ideias para automação, robótica e dispositivos inteligentes. Venha conhecer e compartilhar experiências em projetos na plataforma Arduino.

Squids Arduino

Blogolista.com

O Blogolista.com é um site para a divulgação, promoção e publicidade de blogs. Aqui no Blogolista você encontrará os melhores Links e Blogs da atualidade.

Blogolista.com

JSN Epic template designed by JoomlaShine.com