Hoe een ongeordende lijst in HTML uit te lijnen

Inhoud

• routebeschrijving

Webontwerpers gebruiken 'ongeordende' of 'bladwijzer'-lijsten voor meer dan alleen bladwijzers en tekst toevoegen. De HTML-tag die wordt gebruikt om niet-geordende lijsten te maken, is handig voor het maken van menu's en het organiseren van afbeeldingen voor een JavaScript om in een presentatie te laden. Leren omgaan met CSS (Cascading Style Sheet) samen met deze lijsten zullen veel webontwerpmogelijkheden openen. Het uitlijnen van ongeordende lijsten is een zeer belangrijke vaardigheid om te verbeteren.

routebeschrijving

Gebruik CSS-code om ongeordende lijsten in HTML uit te lijnen (Jupiterimages / Photos.com / Getty Images)

1. Open het HTML-bestand met de ongeordende lijst en doorzoek de tags en , bovenaan de code. Tags toevoegen> en als ze niet al aanwezig zijn. Als uw code een tag bevat

2. ergens erna, en het bevat een verwijzing naar een CSS-bestand, open dat bestand. Je CSS-code gaat tussen de> en of in een nieuwe regel van uw CSS-bestand.

3. Lijn tekst uit binnen bladwijzers door de eigenschap "text-align" van uw tag in te stellen

   . Dit betreft de tags
   • en
   om ze te definiëren als onderdeel van een enkele lijst. Wanneer u de tekst in de tag uitlijnt
   , alle elementen in de lijst worden beïnvloed, maar niet de lijst zelf, links of rechts van de pagina. Een voorbeeld van het gebruik van CSS-code om de eigenschap "text-align" in te stellen, gebruikt u "ul {text-align: right;}". Merk op dat de markeringen niet met de tekst meebewegen. In dit geval staan ​​ze aan de linkerkant.

4. Lijn de volledige lijst links of rechts van de pagina uit door de eigenschap 'float' van uw tag in te stellen

   . Deze eigenschap heeft invloed op de hele lijst door deze naar links of rechts van de pagina te verplaatsen. Schrijf de code "ul {float: right;}".

   U kunt deze eigenschap links of rechts instellen, maar niet naar het midden.

   
   

5. Omhul uw tags

   met tags en om een ​​omslag te maken die de lijst op de pagina zal centreren. De code ziet er als volgt uit: "
   • Lijst element
   • Lijst element
   '.

   De tag zal niets vanzelf uitlijnen; je moet CSS gebruiken om alles te centreren. Voeg de volgende code toe tussen de tags> of in uw CSS-bestand om de lijst te centreren: "div {display: block; text-align: center;} ul {display: inline-block; text-align: left;}".