CSS-Innrykk den andre linjen AV LI (Listeelementer) – Silva Web Designs

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.

You might also like

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.