Have you ever wanted to indent the second line of a list item sen sijaan, että se näkyisi suoraan alla bullet point? Tämä on luultavasti miksi olet täällä ja alla on luultavasti tulos etsit:
Tänään näytämme sinulle helpon tavan tehdä tämä.
syy tähän on se, että rasti on sisällöltään inline, joten tekstin kääriessä se jatkaa virtaamistaan normaalisti.
voit lopettaa tämän käyttäytymisen käyttämällä text-indent:
tekstisisällön ominaisuus määrittää, kuinka paljon vaakasuoraa tilaa tulee jättää ennen elementin tekstisisällön ensimmäisen rivin alkua.
antamalla negatiivisen tekstisisennöksen voit kertoa ensimmäisen rivin siirtävän halutun määrän vasemmalle. Jos sitten määrittää positiivinen täyte-vasemmalle voit peruuttaa tämän offset.
seuraavassa esimerkissä arvo 20px:-
ul { list-style: none; width: 200px; text-indent: -20px; /* key property */ margin-left: 20px; /* key property */ }li { margin-bottom: 10px; }ja siinä se on, tässä on CodePen edellä toiminnassa.