Utilizați codul CSS pentru a alinia listele cu marcatori în HTML.
Designerii web folosesc liste de marcatori pentru mai mult decât pentru a adăuga marcatori și text. Eticheta HTML folosită pentru a crea liste cu marcatori este utilă pentru a crea meniuri sau pentru a organiza imagini pentru ca un JavaScript să se încarce într-o prezentare de diapozitive. Învățarea utilizării codului de foaie de stil în cascadă împreună cu listele marcatoare -- numite „liste neordonate” în argou HTML -- va deschide mai multe posibilități interesante de proiectare web.
Pasul 1
Deschideți fișierul HTML care conține lista cu marcatori și căutați între etichetele și spre partea de sus a codului. Adăugați etichete dacă nu sunt deja prezente. Dacă codul dvs. include un etichetă undeva după etichetă și asta conține o referință la un fișier CSS, apoi deschideți acel fișier. Codul dvs. CSS trece între etichete sau pe o nouă linie a fișierului dvs. CSS.
Videoclipul zilei
Pasul 2
Aliniați textul în toate marcatoarele setând „text-align” pentru dvs
- etichetă. The
- și etichete pentru a le defini ca parte a unei singure liste. Când aliniați textul pentru
- eticheta se înfășoară în jurul
- eticheta, alinierea afectează textul din fiecare marcator, dar nu aliniază lista în sine la stânga sau la dreapta paginii. Iată un exemplu de cod CSS pentru a seta „text-align”:
ul {text-align: right;}
Rețineți că marcanțele nu se mișcă cu textul. Gloanțele rămân la stânga în acest caz.
Pasul 3
Aliniați întreaga listă la stânga sau la dreapta paginii setând „float” pentru dvs
- etichetă. Când „float” este setat la stânga sau la dreapta pe a
- etichetă, mută întreaga listă cu marcatori la stânga sau la dreapta paginii. Setați float astfel:
ul {float: right;}
Puteți seta „float” la stânga sau la dreapta, dar nu în centru.
Pasul 4
Înfășurați-vă
- etichete în
și
etichete pentru a crea un înveliș care va centra lista cu marcatori pe pagina dvs. Codul rezultat va arăta astfel:- Element din listă
- Element din listă
The
eticheta nu centrează nimic de la sine; trebuie să utilizați CSS pentru a centra totul. Adăugați următorul cod între dvs
