Como alinhar uma lista não ordenada em HTML

Contente

• Instruções

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 > e se não estiverem ainda presentes. Se seu código incluir uma tag

2. 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 > e ou em uma linha nova do seu arquivo CSS.

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

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

   
   

5. 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 > ou no seu arquivo CSS para centrar a lista: "div {display: block; text-align: center;} ul {display: inline-block; text-align: left;}".