CSS-Indenting the second line of LI (List Items) – Silva Web Designs

v-ați dorit vreodată să indentați a doua linie a unui element de listă în loc să apară direct sub punctul glonț? Acesta este probabil motivul pentru care sunteți aici și mai jos este probabil rezultatul pe care îl căutați:

astăzi vă vom arăta o modalitate ușoară de a face acest lucru.

motivul pentru care se întâmplă acest lucru este că bifarea este conținut în linie, astfel încât atunci când textul se înfășoară va continua să curgă ca de obicei.

puteți opri acest comportament profitând de text-indent:

proprietatea Text-liniuță specifică cât spațiu orizontal trebuie lăsat înainte de începutul primei linii a conținutului text al unui element.

furnizând o liniuță text negativă, puteți spune primei linii să schimbe o cantitate dorită spre stânga. Dacă apoi specificați un padding pozitiv-stânga puteți anula acest offset.

în exemplul următor o valoare de 20px:-

ul { list-style: none; width: 200px; text-indent: -20px; /* key property */ margin-left: 20px; /* key property */ }li { margin-bottom: 10px; }

și nu-l ai, aici este un CodePen de mai sus în acțiune.

You might also like

Lasă un răspuns

Adresa ta de email nu va fi publicată.