Como alinhar uma lista não ordenada em HTML

Escrito por sara williams | Traduzido por josé fabián
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.

Instruções

  1. 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.

  2. 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. 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. 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