Você está aqui: CSS ::: Dicas & Truques ::: Barras de Navegação, Menus e Dropdowns

Como criar uma barra de menus na horizontal usando CSS e o valor inline-block para a propriedade display

Quantidade de visualizações: 526 vezes
Nesta dica mostrarei como podemos criar uma barra de menus horizontal usando CSS. Para isso cada item de menu será um elemento <li>, contidos dentro de um elemento <ul>. O truque é definir o valor inline-block para a propriedade display de cada elemento <li>.

Veja a página HTML e CSS completa para o exemplo:

<!doctype html>
<html>
<head>
  <title>Estudos CSS</title>
  
<style>
  #menu{
    background-color: #eeeeee; 
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
  }

  #menu li {
    display: inline-block;
    font-size: 20px;
    padding: 20px;
    text-decoration: none;
  }
  
  #menu li a{
    text-decoration: none;
  }
</style>

</head>
  
<body>

<h1>Exemplo de Barra de Menu Horizontal</h1>


Link para compartilhar na Internet ou com seus amigos:

Veja mais Dicas e truques de CSS

Dicas e truques de outras linguagens

E-Books em PDF

E-Book 350 Exercícios Resolvidos de Java - PDF com 500 páginas
Domine lógica de programação e a linguagem Java com o nosso E-Book 350 Exercícios Exercícios de Java, para você estudar onde e quando quiser.

Este e-book contém exercícios resolvidos abrangendo os tópicos: Java básico, matemática e estatística, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book
E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - PDF com 1.200 páginas
Domine lógica de programação e a linguagem Python com o nosso E-Book 650 Dicas, Truques e Exercícios Exercícios de Python, para você estudar onde e quando quiser.

Este e-book contém dicas, truques e exercícios resolvidos abrangendo os tópicos: Python básico, matemática e estatística, banco de dados, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby



© 2025 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 31 usuários muito felizes estudando em nosso site.