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.