Como alinhar uma lista não ordenada em HTML

Escrito por sara williams | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como alinhar uma lista não ordenada em HTML
Use código CSS para alinhar listas não ordenadas em HTML (Jupiterimages/Photos.com/Getty Images)

Os designers web usam listas "não ordenadas" ou "de marcadores" para mais do que só adicionar marcadores e texto. A tag HTML, usada para criar listas não ordenadas, é útil para criar menus e organizar imagens para que um JavaScript as carregue em uma apresentação. Aprender a usar código CSS (Cascading Style Sheet, "Folhas de estilos em cascata") junto com estas listas, abrirá numerosas possibilidades de design web. O alinhamento de listas não ordenadas é uma habilidade muito importante para aprimorar.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o arquivo HTML que contém a lista não ordenada e olhe entre as tags <head> e </head>, na parte superior do código. Adicione tags <style> e </style> se não estiverem ainda presentes. Se seu código incluir uma tag <link> em alguma parte depois da <head>, e ela contiver uma referência a um arquivo CSS, abra esse arquivo. Seu código CSS irá entre as tags <style> e </style> ou em uma linha nova do seu arquivo CSS.

  2. 2

    Alinhe o texto dentro dos marcadores configurando a propriedade "text-align" da sua tag <ul>. Esta envolve as tags <li> e </li> para defini-las como parte de uma lista única. Quando você alinhar o texto na tag <ul>, serão afetados todos os elementos da lista, mas não a lista em si, à esquerda ou direita da página. Um exemplo de uso de código CSS para configurar a propriedade "text-align", use "ul {text-align: right;}". Note que os marcadores não se moverão com o texto. Neste caso, elas ficarão à esquerda.

  3. 3

    Alinhe a lista inteira à esquerda ou à direita da página configurando a propriedade "float" da sua tag <ul>. Essa propriedade afeta a lista inteira, movendo-a à esquerda ou à direita da página. Escreva o código "ul {float: right;}".

    Você pode configurar esta propriedade à esquerda ou à direita, mas não ao centro.

  4. 4

    Envolva suas tags <ul> com tags <div> e </div> para criar um envoltório que centrará a lista na página. O código se verá assim: "<div> <ul> <li>Elemento da lista</li> <li>Elemento da lista</li> </ul> </div>".

    A tag <div> não alinhará nada por si mesma; você deverá usar CSS para centrar tudo. Adicione o seguinte código entre as tags <style> ou no seu arquivo CSS para centrar a lista: "div {display: block; text-align: center;} ul {display: inline-block; text-align: left;}".

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível