折り返された箇条書きリストの項目がインデントされないようにするにはどうすればよいですか?

折り返された箇条書きリスト項目のインデント

長いリスト項目が新しい行に折り返されると、折り返された部分がインデントされて表示されるのが一般的です。箇条書き記号の下にあります。ただし、特定のシナリオでは、折り返されたテキストを最初の行と垂直に並べることが望ましい場合があります。

これを実現するには、2 レベルのコンテナ構造の使用を検討してください。箇条書き記号を独自のコンテナで囲み、リスト項目テキストのコンテナの隣に配置します。これらのコンテナを親コンテナ内にネストすることで、要素の位置と配置を制御できます。

.container-div {
    padding-left: 20px;
}

.red-square-5 {
    position: absolute;
    width: 5px;
    height: 5px;
    margin-top: 0.5em;
    background: #f00;
}

.row2 {
    overflow: hidden;
    max-width: 500px;
}

<div class="container-div">
    <div class="red-square-5"></div>
    <div class="row2">
        Long long long long long long long long long long long long long long long long long long long long long long long long long title
    </div>
</div>

この方法では、折り返されたテキストが最初の行と揃えて左側に表示されます。 , 箇条書き記号は元の位置に残ります。この手法により、箇条書きリストのインデントとレイアウトを正確に制御できます。

以上が折り返された箇条書きリストの項目がインデントされないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。