on-load-remove-class="default-font">
×
Loading ...

Como alinhar uma lista não ordenada em HTML

Atualizado em 20 julho, 2017

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.

Instruções

Use código CSS para alinhar listas não ordenadas em HTML (Jupiterimages/Photos.com/Getty Images)
  1. Abra o arquivo HTML que contém a lista não ordenada e olhe entre as tags e , na parte superior do código. Adicione tags se não estiverem ainda presentes. Se seu código incluir uma tag em alguma parte depois da , e ela contiver uma referência a um arquivo CSS, abra esse arquivo. Seu código CSS irá entre as tags ou em uma linha nova do seu arquivo CSS.

    Loading...
  2. Alinhe o texto dentro dos marcadores configurando a propriedade "text-align" da sua tag

      . Esta envolve as tags
    • e
    • para defini-las como parte de uma lista única. Quando você alinhar o texto na tag
        , 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. Alinhe a lista inteira à esquerda ou à direita da página configurando a propriedade "float" da sua tag

      . 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. Envolva suas tags

      com tags
      e
      para criar um envoltório que centrará a lista na página. O código se verá assim: "
      • Elemento da lista
      • Elemento da lista
      ".

      A tag

      não alinhará nada por si mesma; você deverá usar CSS para centrar tudo. Adicione o seguinte código entre as tags