Gebruik CSS-code om lijsten met opsommingstekens in HTML uit te lijnen.
Webdesigners gebruiken opsommingslijsten voor meer dan alleen het toevoegen van opsommingstekens en tekst. De HTML-tag die wordt gebruikt om opsommingstekens te maken, is handig voor het maken van menu's of het organiseren van afbeeldingen zodat JavaScript in een diavoorstelling kan worden geladen. Leren om trapsgewijze stijlbladcode te gebruiken in combinatie met opsommingstekens -- in HTML-taal "ongeordende lijsten" genoemd -- zal verschillende opwindende mogelijkheden voor webontwerp openen.
Stap 1
Open uw HTML-bestand met de lijst met opsommingstekens en kijk tussen de en tags naar de bovenkant van de code. Voeg tags toe als deze nog niet aanwezig zijn. Als uw code een bevat tag ergens achter de tag, en dat bevat een verwijzing naar een CSS-bestand en open in plaats daarvan dat bestand. Uw CSS-code komt tussen de tags of op een nieuwe regel van uw CSS-bestand.
Video van de dag
Stap 2
Lijn de tekst binnen alle opsommingstekens uit door "text-align" in te stellen voor uw
- label. De
- en tags om ze te definiëren als onderdeel van een enkele lijst. Wanneer u tekst uitlijnt voor de
- tag wikkelt zich om de
- tag, de uitlijning is van invloed op de tekst in elk opsommingsteken, maar lijnt de lijst zelf niet uit aan de linker- of rechterkant van de pagina. Hier is een voorbeeld van CSS-code om "text-align" in te stellen:
ul {text-align: rechts;}
Merk op dat de opsommingstekens niet met de tekst meebewegen. De kogels blijven in dit geval links.
Stap 3
Lijn de volledige lijst links of rechts van de pagina uit door "float" in te stellen voor uw
- label. Wanneer "float" is ingesteld op links of rechts op a
- tag verplaatst, wordt de volledige lijst met opsommingstekens naar links of rechts van de pagina verplaatst. Stel float als volgt in:
ul {zweven: rechts;}
U kunt "zweven" naar links of naar rechts instellen, maar niet naar het midden.
Stap 4
Wikkel je
- tags in
en
tags om een wrapper te maken die de lijst met opsommingstekens op uw pagina centreert. Uw resulterende code ziet er als volgt uit:- Lijstitem
- Lijstitem
De
tag centreert niets vanzelf; je moet CSS gebruiken om alles te centreren. Voeg de volgende code toe tussen uw
