CSS-Wcięcie drugiej linii LI (elementy listy) – Silva Web Designs

czy kiedykolwiek chciałeś wcięcie drugiej linii elementu listy zamiast pojawiać się bezpośrednio pod podpunktem? Prawdopodobnie dlatego tu jesteś, a poniżej prawdopodobnie szukasz wyniku:

dzisiaj pokażemy wam prosty sposób na to.

powodem tego jest to, że kleszcz jest zawartością w wierszu, więc gdy tekst zostanie zawinięty, będzie nadal płynął jak zwykle.

możesz zatrzymać to zachowanie korzystając z text-indent:

właściwość text-indent określa, ile poziomej spacji należy pozostawić przed rozpoczęciem pierwszej linii zawartości tekstu elementu.

wprowadzając wcięcie tekstu negatywnego, możesz powiedzieć pierwszej linii, aby przesunęła żądaną kwotę w lewo. Jeśli następnie określisz dodatni padding-left, możesz anulować ten offset.

w poniższym przykładzie wartość 20px:-

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

i tu masz to, oto Kodepen powyższego w akcji.

You might also like

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.