Use o código CSS para alinhar listas com marcadores em HTML.
Web designers usam listas de marcadores para mais do que apenas adicionar marcadores e texto. A tag HTML usada para criar listas com marcadores é útil para criar menus ou organizar imagens para um JavaScript carregar em uma apresentação de slides. Aprender a usar o código de folha de estilo em cascata em conjunto com listas de marcadores - chamadas de "listas não ordenadas" na gíria HTML - abrirá várias possibilidades interessantes de design para a Web.
Passo 1
Abra o arquivo HTML que contém a lista com marcadores e olhe entre as tags e na parte superior do código. Adicione tags se ainda não estiverem presentes. Se o seu código inclui um tag em algum lugar após a tag, e que contém uma referência a um arquivo CSS e, em seguida, abra esse arquivo. Seu código CSS fica entre as tags ou em uma nova linha de seu arquivo CSS.
Vídeo do dia
Passo 2
Alinhe o texto dentro de todos os marcadores, definindo "alinhamento de texto" para o seu
- marcação. O
- e tags para defini-los como parte de uma única lista. Quando você alinha o texto para o
- etiqueta envolve o
- tag, o alinhamento afeta o texto em todos os marcadores, mas não alinha a lista à esquerda ou à direita da página. Aqui está um exemplo de código CSS para definir "text-align":
ul {alinhamento do texto: à direita;}
Observe que os marcadores não se movem com o texto. As balas ficam à esquerda neste caso.
etapa 3
Alinhe toda a lista à esquerda ou à direita da página, definindo "flutuar" para o seu
- marcação. Quando "flutuar" é definido para a esquerda ou direita em um
- tag, ele move toda a lista com marcadores para a esquerda ou direita da página. Defina o flutuador assim:
ul {float: right;}
Você pode definir "flutuar" para a esquerda ou para a direita, mas não para o centro.
Passo 4
Embrulhe o seu
- tags em
e
tags para criar um wrapper que centralizará a lista com marcadores em sua página. Seu código resultante será semelhante a este:- Item da lista
- Item da lista
O
tag não centraliza nada por si só; você deve usar CSS para centralizar tudo. Adicione o seguinte código entre
