Så här anpassar du en oorderad lista i HTML

Innehåll

• vägbeskrivning

Webbdesigners använder "unordered" eller "bookmark" listor för mer än bara att lägga till bokmärken och text. HTML-taggen som används för att skapa oordnade listor är användbar för att skapa menyer och organisera bilder för att JavaScript ska kunna läsas in i en presentation. Att lära sig hur man använder CSS (Cascading Style Sheet) tillsammans med dessa listor öppnar många webbdesign möjligheter. Att jämföra oordnade listor är en mycket viktig färdighet att förbättra.

vägbeskrivning

Använd CSS-kod för att inrätta oordnade listor i HTML (Jupiterimages / Photos.com / Getty Images)

1. Öppna HTML-filen som innehåller den oordnade listan och kolla igenom taggarna och , längst upp i koden. Lägg till taggar> och om de inte redan är närvarande. Om din kod innehåller en tagg

2. någonstans efter det, och den innehåller en referens till en CSS-fil, öppna den filen. Din CSS-kod kommer att gå mellan> och eller i en ny rad i din CSS-fil.

3. Justera texten i bokmärken genom att ange egenskapen för "text-align" av din tagg

   . Detta innebär taggarna
   • och
   att definiera dem som en del av en enda lista. När du justerar texten i taggen
   , alla element i listan kommer att påverkas, men inte själva listan, till vänster eller höger om sidan. Ett exempel på att använda CSS-kod för att ställa in egenskapen "textjustera" använder "ul {text-align: right;}". Observera att markörerna inte flyttas med texten. I det här fallet kommer de att vara till vänster.

4. Rikta hela listan till vänster eller höger om sidan genom att ställa in egenskapen "float" på din tagg

   . Den här egenskapen påverkar hela listan genom att flytta den till vänster eller höger om sidan. Skriv koden "ul {float: right;}".

   Du kan ställa in den här egenskapen till vänster eller höger, men inte till mitten.

   
   

5. Kuvert dina taggar

   med taggar och skapa en omslag som kommer att centrera listan på sidan. Koden kommer att se ut så här: "
   • Listelement
   • Listelement
   '.

   Etiketten kommer inte att inriktas något av sig själv; du borde använda CSS för att centrera allt. Lägg till följande kod mellan> taggarna eller i din CSS-fil för att centrera listan: "div {display: block; text-align: center;} ul {display: inline-block; text-align: left;}".