箇条書きの直下に表示されるのではなく、リスト項目の2行目をインデントしたいと思ったことはあ これはおそらくあなたがここにいる理由であり、以下はおそらくあなたが探している結果です:
今日、私たちはあなたにこれを行うための簡単な方法をお見せしようとしています。
これが起こっている理由は、ティックがインラインコンテンツであるため、テキストが折り返されたときにはいつものように流れ続けます。
text-indentを利用することで、この動作を止めることができます:
text-indentプロパティは、要素のテキストコンテンツの最初の行の先頭の前にどのくらいの水平スペースを残すかを指定します。
負のtext-indentを指定すると、最初の行に希望の量を左にシフトするように指示できます。 正のpadding-leftを指定すると、このオフセットを取り消すことができます。
次の例では、20pxの値を指定します:-
ul { list-style: none; width: 200px; text-indent: -20px; /* key property */ margin-left: 20px; /* key property */ }li { margin-bottom: 10px; }そして、あなたはそれを持っています、ここでは上記のCodePenが動作しています。