Cum să aliniați o listă neordonată în HTML

Conţinut

• instrucțiuni de ghidare

Designerii de web folosesc listele "neordonate" sau "marcaj" pentru mai mult decât adăugarea de marcaje și text. Eticheta HTML folosită pentru a crea liste neordonate este utilă pentru crearea de meniuri și organizarea de imagini pentru ca JavaScript să se încarce într-o prezentare. Învățarea utilizării CSS (Cascading Style Sheet) împreună cu aceste liste va deschide multe posibilități de design web. Alinierea listelor neordonate este o abilitate foarte importantă de îmbunătățire.

instrucțiuni de ghidare

Utilizați codul CSS pentru a alinia liste neordonate în HTML (Jupiterimages / Photos.com / Getty Images)

1. Deschideți fișierul HTML care conține lista neordonată și căutați prin etichete și , în partea de sus a codului. Adăugați etichete> și dacă acestea nu sunt deja prezente. Dacă codul dvs. include o etichetă

2. undeva după el, și conține o referință la un fișier CSS, deschideți acel fișier. Codul dvs. CSS va merge între> și sau într-o linie nouă a fișierului dvs. CSS.

3. Aliniați textul în marcaje prin setarea proprietății "text-align" a etichetei

   . Aceasta implică etichetele
   • și
   pentru a le defini ca parte a unei singure liste. Când aliniați textul în etichetă
   , toate elementele din listă vor fi afectate, însă nu lista în sine, în stânga sau la dreapta paginii. Un exemplu de folosire a codului CSS pentru a seta proprietatea "text-align", folosiți "ul {text-align: right;}". Rețineți că marcatorii nu se vor mișca împreună cu textul. În acest caz, vor fi în stânga.

4. Aliniați întreaga listă la stânga sau la dreapta paginii setând proprietatea "float" a etichetei

   . Această proprietate afectează întreaga listă prin mutarea acesteia în stânga sau în dreapta paginii. Scrieți codul "ul {float: right;}".

   Puteți seta această proprietate la stânga sau la dreapta, dar nu la centru.

   
   

5. Înveliți etichetele

   cu etichete și pentru a crea o învelire care va centra lista pe pagină. Codul va arăta astfel: "
   • Element de listă
   • Element de listă
   '.

   Eticheta nu va alinia nimic de la sine; ar trebui să utilizați CSS pentru a centra totul. Adăugați următorul cod între etichetele> sau în fișierul dvs. CSS pentru a centra lista: "div {display: block; text-align: center;} ul {display: inline-block;