Zawartość
Projektanci stron internetowych używają list „nieuporządkowanych” lub „zakładek”, aby nie tylko dodawać zakładki i tekst. Znacznik HTML używany do tworzenia nieuporządkowanych list jest przydatny do tworzenia menu i porządkowania obrazów w celu załadowania kodu JavaScript do prezentacji. Nauka korzystania z CSS (Cascading Style Sheet) wraz z tymi listami otworzy wiele możliwości projektowania stron internetowych. Wyrównanie list nieuporządkowanych jest bardzo ważną umiejętnością, którą należy poprawić.
Instrukcje
Użyj kodu CSS, aby wyrównać nieuporządkowane listy w HTML (Jupiterimages / Photos.com / Getty Images)-
Otwórz plik HTML zawierający nieuporządkowaną listę i przejrzyj znaczniki i , na górze kodu. Dodaj tagi> i jeśli nie są jeszcze obecne. Jeśli twój kod zawiera tag
- gdzieś po nim i zawiera odniesienie do pliku CSS, otwórz ten plik. Twój kod CSS przejdzie między> i lub w nowym wierszu pliku CSS.
-
Wyrównaj tekst w zakładkach, ustawiając właściwość „wyrównywanie tekstu” znacznika
- . Dotyczy to tagów
- i zdefiniować je jako część jednej listy. Po wyrównaniu tekstu w tagu
- , wpłynie to na wszystkie elementy na liście, ale nie na samą listę po lewej lub prawej stronie. Przykład użycia kodu CSS do ustawienia właściwości „text-align”, użyj „ul {text-align: right;}”. Zauważ, że znaczniki nie poruszają się wraz z tekstem. W tym przypadku będą po lewej stronie.
-
Wyrównaj całą listę po lewej lub prawej stronie, ustawiając właściwość „float” tagu
- . Ta właściwość wpływa na całą listę, przesuwając ją w lewo lub w prawo na stronie. Napisz kod „ul {float: right;}”.
Możesz ustawić tę właściwość w lewo lub w prawo, ale nie w środku.
-
Zaklej swoje tagi
- z tagami i aby utworzyć zawijanie, które wyśrodkuje listę na stronie. Kod będzie wyglądał następująco: „
- Element listy
- Element listy
Tag nie wyrówna niczego samodzielnie; powinieneś użyć CSS do wyśrodkowania wszystkiego. Dodaj następujący kod między tagami> lub w pliku CSS, aby wyśrodkować listę: „div {display: block; text-align: center;} ul {display: inline-block; text-align: left;}”.