har du nogensinde ønsket at indrykke den anden linje i et listeelement i stedet for at det vises direkte under punkttegn? Dette er sandsynligvis grunden til, at du er her, og nedenfor er sandsynligvis det resultat, du leder efter:
i dag skal vi vise dig en nem måde at gøre dette på.
årsagen til, at dette sker, er, at krydset er inline-indhold, så når teksten ombrydes, vil den fortsætte med at flyde som normalt.
du kan stoppe denne adfærd ved at drage fordel af text-indent:
egenskaben tekstindrykning angiver, hvor meget vandret plads der skal være tilbage før begyndelsen af den første linje i tekstindholdet i et element.
ved at angive en negativ tekstindrykning kan du fortælle den første linje at flytte en ønsket mængde til venstre. Hvis du derefter angiver en positiv polstring-venstre kan du annullere denne forskydning ud.
i det følgende eksempel en værdi på 20:-
ul { list-style: none; width: 200px; text-indent: -20px; /* key property */ margin-left: 20px; /* key property */ }li { margin-bottom: 10px; }og der har du det, her er en Kodepen af ovenstående i aktion.