Χρησιμοποιήστε κώδικα CSS για να ευθυγραμμίσετε τις λίστες με κουκκίδες σε HTML.
Οι σχεδιαστές ιστοσελίδων χρησιμοποιούν λίστες κουκκίδων για περισσότερα από την απλή προσθήκη κουκκίδων και κειμένου. Η ετικέτα HTML που χρησιμοποιείται για τη δημιουργία λιστών κουκκίδων είναι χρήσιμη για τη δημιουργία μενού ή την οργάνωση εικόνων για φόρτωση ενός JavaScript σε μια παρουσίαση. Η εκμάθηση της χρήσης του κώδικα κλιμακωτών φύλλων στυλ σε συνδυασμό με λίστες κουκκίδων -- που ονομάζονται "μη ταξινομημένες λίστες" στην αργκό HTML -- θα ανοίξει πολλές συναρπαστικές δυνατότητες σχεδίασης Ιστού.
Βήμα 1
Ανοίξτε το αρχείο HTML που περιέχει τη λίστα με κουκκίδες και κοιτάξτε μεταξύ των ετικετών και προς την κορυφή του κώδικα. Προσθέστε ετικέτες εάν δεν υπάρχουν ήδη. Εάν ο κωδικός σας περιλαμβάνει α τοποθετήστε ετικέτα κάπου μετά την ετικέτα, και αυτό περιέχει μια αναφορά σε ένα αρχείο CSS και, στη συνέχεια, ανοίξτε αυτό το αρχείο. Ο κώδικας CSS σας πηγαίνει ανάμεσα στις ετικέτες ή σε μια νέα γραμμή του αρχείου σας CSS.
Το βίντεο της ημέρας
Βήμα 2
Ευθυγραμμίστε το κείμενο μέσα σε όλες τις κουκκίδες ορίζοντας "text-align" για εσάς
- ετικέτα. ο
- και ετικέτες για να τις ορίσετε ως μέρος μιας ενιαίας λίστας. Όταν στοιχίζετε κείμενο για το
- η ετικέτα τυλίγεται γύρω από το
- ετικέτα, η στοίχιση επηρεάζει το κείμενο σε κάθε κουκκίδα, αλλά δεν ευθυγραμμίζει την ίδια τη λίστα στα αριστερά ή στα δεξιά της σελίδας. Ακολουθεί ένα παράδειγμα κώδικα CSS για να ορίσετε "text-align":
ul {text-align: right;}
Σημειώστε ότι οι κουκκίδες δεν κινούνται με το κείμενο. Οι σφαίρες παραμένουν στα αριστερά σε αυτή την περίπτωση.
Βήμα 3
Ευθυγραμμίστε ολόκληρη τη λίστα στα αριστερά ή στα δεξιά της σελίδας, ρυθμίζοντας το "float" για εσάς
- ετικέτα. Όταν το "float" έχει ρυθμιστεί αριστερά ή δεξιά στο α
- ετικέτα, μετακινεί ολόκληρη τη λίστα με κουκκίδες αριστερά ή δεξιά της σελίδας. Ρυθμίστε το float ως εξής:
ul {float: δεξιά;}
Μπορείτε να ρυθμίσετε το "float" αριστερά ή δεξιά, αλλά όχι στο κέντρο.
Βήμα 4
Τυλίξτε το δικό σας
- ετικέτες σε
και
ετικέτες για να δημιουργήσετε ένα περιτύλιγμα που θα κεντράρει τη λίστα με κουκκίδες στη σελίδα σας. Ο κώδικας που θα προκύψει θα μοιάζει με αυτό:- Στοιχείο λίστας
- Στοιχείο λίστας
ο
Η ετικέτα δεν κεντράρει τίποτα από μόνη της. πρέπει να χρησιμοποιήσετε CSS για να κεντράρετε τα πάντα. Προσθέστε τον ακόλουθο κώδικα μεταξύ σας
