heeft u ooit de tweede regel van een lijstitem willen inspringen in plaats van direct onder het opsommingsteken te verschijnen? Dit is waarschijnlijk de reden waarom u hier bent en Hieronder is waarschijnlijk het resultaat dat u zoekt:
vandaag laten we jullie een gemakkelijke manier zien om dit te doen.
de reden dat dit gebeurt is dat het vinkje inline inhoud is, zodat wanneer de tekst wraps het zal blijven stromen zoals gewoonlijk.
u kunt dit gedrag stoppen door gebruik te maken van text-indent:
de eigenschap text-indent specificeert hoeveel horizontale spatie moet worden gelaten vóór het begin van de eerste regel van de tekstinhoud van een element.
door een negatieve tekst-inspringing op te geven kunt u de eerste regel vertellen om een gewenste hoeveelheid naar links te verschuiven. Als u vervolgens een positieve padding-links opgeeft kunt u deze offset uit te annuleren.
In het volgende voorbeeld een waarde van 20px:-
ul { list-style: none; width: 200px; text-indent: -20px; /* key property */ margin-left: 20px; /* key property */ }li { margin-bottom: 10px; }en daar heb je het, hier is een CodePen van het bovenstaande in actie.