har du någonsin velat dra in den andra raden i ett listobjekt istället för att det visas direkt under punktpunkten? Det är förmodligen därför du är här och Nedan är förmodligen det resultat du letar efter:
idag ska vi visa dig ett enkelt sätt att göra detta.
anledningen till att detta händer är att bocken är inline innehåll så när texten wraps det kommer att fortsätta att flöda som vanligt.
du kan stoppa detta beteende genom att dra nytta av text-indent:
egenskapen textindrag anger hur mycket horisontellt utrymme som ska lämnas före början av den första raden i textinnehållet i ett element.
genom att ange ett negativt textindrag kan du berätta för den första raden att flytta en önskad mängd till vänster. Om du sedan anger en positiv stoppning-vänster kan du avbryta denna förskjutning ut.
i följande exempel ett värde på 20px:-
ul { list-style: none; width: 200px; text-indent: -20px; /* key property */ margin-left: 20px; /* key property */ }li { margin-bottom: 10px; }och där har du det, här är en CodePen av ovanstående i aktion.