Există două moduri de a construi două elemente unul după altul:
afișare: inline; Dar este de fapt o afișare mai bună: inline-block; veți obține "linia" necesară a elementului, dar și unele caracteristici ale blocajului: capacitatea de a specifica lățimea, garniturile etc.
float: stânga; Debit normal. În acest fel îmi place mai mult. Orice element raționalizat devine blocat. Între elementele blocului nu există spații. Cel puțin pentru asta mi se pare mai potrivit. Dar fluxul are mai multe caracteristici. De exemplu, că fluxul ar trebui să scadă. Acest lucru se face prin proprietatea clară: ambele; (înfășurarea din dreapta și din stânga și din dreapta). O etichetă cu această proprietate ar trebui să meargă după ultimul element raționalizat. Pentru a nu lăsa hărți HTML cu etichete suplimentare, este recomandat să adăugați o clasă clarfix la cod (vezi codul) și pur și simplu să o adăugați la eticheta wrapper-ului parental. Utilizând clasele înainte și după pseudo-clase, elementele necesare sunt adăugate cu o resetare de streaming.
Primul și ultimul element nu trebuie să fie unificate în html. Puteți utiliza pseudo-clase CSS:
Pentru colțurile rotunjite, încercați să utilizați proprietatea razei de graniță.
Pentru elementele li, adăugați o lățime de 20%.
Legăturile din interiorul elementelor sunt blocate (afișare: bloc), astfel încât acestea să ocupe întreaga lățime a elementului.
2) Vă recomandăm să utilizați ul / li pentru meniul de navigare. Și pentru meniul de acțiune, utilizați meniul / li. Meniul de navigare este setat să afișeze clasa .nav sau .navigation.
3) Atunci când împrăștiați mai multe componente, cum ar fi li, cu conținutul img, aplicați totul la marcarea, de exemplu marginea sau dimensiunile, la li.
4) Fundalul a fost pierdut pentru că nu a scutit fluxul. Adăugați clasa Clearfix în eticheta de înfășurare a componentelor din meniu.
5) Dacă meniul pe care îl aruncați cu ajutorul ambalajului, apoi înfășurați-l în fundal, adăugați și această clarificare.
6) Și mai multă logică în cod. Scrieți selectorii unul după altul, conform ordinului semantic.
Articole similare
Trimiteți-le prietenilor: