Har du noen gang ønsket å rykke inn den andre linjen I et listeelement i stedet for det vises rett under punkt? Dette er sannsynligvis hvorfor du er her og under er trolig resultatet du leter etter:
I Dag skal vi vise deg en enkel måte å gjøre dette på.
grunnen til at dette skjer er at krysset er inline-innhold, så når teksten brytes, fortsetter den å flyte som vanlig.
du kan stoppe denne oppførselen ved å dra nytte av text-indent
:
egenskapen tekstinnrykk angir hvor mye vannrett mellomrom som skal være igjen før begynnelsen av den første linjen i tekstinnholdet i et element.
ved å angi et negativt tekstinnrykk kan du be den første linjen om å flytte ønsket beløp til venstre. Hvis du deretter angir en positiv polstring-venstre, kan du avbryte denne forskyvningen.
i følgende eksempel en verdi på 20px:-
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 av det ovennevnte i aksjon.