Πώς να ευθυγραμμίσετε μια μη ταξινομημένη λίστα σε HTML

Περιεχόμενο

• Οδηγίες

Οι σχεδιαστές ιστοσελίδων χρησιμοποιούν τις λίστες "αδιάθετων" ή "σελιδοδεικτών" για περισσότερα από την προσθήκη σελιδοδεικτών και κειμένου. Η ετικέτα HTML που χρησιμοποιείται για τη δημιουργία μη ταξινομημένων λιστών είναι χρήσιμη για τη δημιουργία μενού και την οργάνωση εικόνων για τη φόρτωση μιας JavaScript σε μια παρουσίαση. Η εκμάθηση της χρήσης του CSS (Cascading Style Sheet) μαζί με αυτές τις λίστες θα ανοίξει πολλές δυνατότητες σχεδιασμού ιστοσελίδων. Η ευθυγράμμιση των μη τακτοποιημένων λιστών είναι μια πολύ σημαντική δεξιότητα για βελτίωση.

Οδηγίες

Χρησιμοποιήστε τον κώδικα CSS για να ευθυγραμμίσετε τις μη καταχωρημένες λίστες σε HTML (Jupiterimages / Φωτογραφίες.com / Getty Images)

1. Ανοίξτε το αρχείο HTML που περιέχει τη μη ταξινομημένη λίστα και αναζητήστε τις ετικέτες και , στην κορυφή του κώδικα. Προσθήκη ετικετών> και αν δεν υπάρχουν ήδη. Εάν ο κωδικός σας περιλαμβάνει μια ετικέτα

2. κάπου μετά από αυτό, και περιέχει μια αναφορά σε ένα αρχείο CSS, ανοίξτε το αρχείο. Ο κωδικός CSS σας θα μεταβεί μεταξύ των και> ή σε μια νέα γραμμή του αρχείου CSS.

3. Ευθυγραμμίστε το κείμενο εντός των σελιδοδεικτών ρυθμίζοντας την ιδιότητα "ευθυγράμμιση κειμένου" της ετικέτας σας

   . Αυτό περιλαμβάνει τις ετικέτες
   • και
   να τα ορίσετε ως μέρος μιας ενιαίας λίστας. Όταν ευθυγραμμίζετε το κείμενο στην ετικέτα
   , όλα τα στοιχεία της λίστας θα επηρεαστούν, αλλά όχι η ίδια η λίστα, στα αριστερά ή δεξιά της σελίδας. Ένα παράδειγμα χρήσης κώδικα CSS για να ορίσετε την ιδιότητα "κείμενο-ευθυγράμμιση", χρησιμοποιήστε το "ul {text-align: right;}". Σημειώστε ότι οι δείκτες δεν θα κινηθούν με το κείμενο. Σε αυτή την περίπτωση, θα βρίσκονται στα αριστερά.

4. Ευθυγραμμίστε ολόκληρη τη λίστα προς τα αριστερά ή δεξιά της σελίδας ρυθμίζοντας την ιδιότητα "float" της ετικέτας σας

   . Αυτή η ιδιότητα επηρεάζει ολόκληρη τη λίστα, μετακινώντας την προς τα αριστερά ή προς τα δεξιά της σελίδας. Γράψτε τον κώδικα "ul {float: right}}".

   Μπορείτε να ορίσετε αυτήν την ιδιότητα στα αριστερά ή στα δεξιά, αλλά όχι στο κέντρο.

   
   

5. Συμπληρώστε τις ετικέτες σας

   με ετικέτες και για να δημιουργήσετε ένα περιτύλιγμα που θα κεντράρει τη λίστα στη σελίδα. Ο κώδικας θα μοιάζει με αυτό: "
   • Στοιχείο λίστας
   • Στοιχείο λίστας
   '.

   Η ετικέτα δεν θα ευθυγραμμίζει τίποτα από μόνη της. θα πρέπει να χρησιμοποιήσετε το CSS για να συγκεντρώσετε τα πάντα. Προσθέστε τον ακόλουθο κώδικα ανάμεσα στις ετικέτες> ή στο αρχείο CSS για να κεντράρετε τη λίστα: "div {display: block; text-align: center;} ul {display: inline-block;