Så här centrerar du en horisontell lista i en Div i CSS

Författare: Laura McKinney
Skapelsedatum: 2 April 2021
Uppdatera Datum: 21 November 2024
Anonim
Så här centrerar du en horisontell lista i en Div i CSS - Artiklar
Så här centrerar du en horisontell lista i en Div i CSS - Artiklar

Innehåll

När du skapar en webbsida kan det vara användbart att använda CSS för att centrera en horisontell lista, till exempel en klickbar meny. Du kan använda CSS, vilket är ett stilarksspråk, bredvid HTML för att styra utseendet på din sida. CSS-format visas ofta oförutsägbart i olika webbläsare, så det är viktigt att du testar din sida noggrant innan du skickar den. En oorderad lista (ul) är ett blocknivåelement, så du kan använda breddegenskapen för att skapa en centraliserad effekt.


vägbeskrivning

Du kan använda CSS och HTML för att styra utseendet på din webbsida (Comstock / Stockbyte / Getty Images)
  1. Öppna din HTML-fil i en textredigerare, till exempel Windows Anteckningsblock.

  2. Lägg till de nödvändiga CSS-formaten i den horisontella listan i avsnittet "" i HTML-filen genom att lägga till följande kod:

    typ = "text / css"> .myclass {text-align: center; } .cykel ul {bredd: 275px; marginal: 0px auto} .myclass li {display: block; float: left; höjd: 50px; linjehöjd: 50px; marginal: 5px; bredd: 125px; gräns: solid 1px svart; }

    Listans bredd (ul) representerar summan av bredden och marginalerna för de horisontella objekten (li).

  3. Skapa en horisontell lista i avsnittet ">" i HTML-filen genom att lägga till följande kod:


    • första föremålet
    • andra föremålet i div

    "Ul" -taggen anger en oorderad lista. "Li" -taggen motsvarar ett objekt i listan. Listobjekt använder CSS-format som matchar de som definierats ovan.

  4. Spara HTML-filen och ladda den på din webbserver för att visa den horisontella, centrerade listan.