折り返された箇条書きリスト項目を最初の行に揃えるにはどうすればよいですか?

箇条書き項目の 2 行目を最初の行に揃える

箇条書きリスト項目が複数行にまたがる場合、行を折り返すことが望ましいことがよくあります。の下に表示されるのではなく、最初の行に揃えられます。 Bullet.

解決策:

この配置を実現するには、箇条書きを別の div に分割し、箇条書きとテキストの両方をコンテナ div でラップします:

.container-div {
    padding-left: 20px;
    overflow: hidden;
    max-width: 500px;
}
.red-square-5 {
    position: absolute;
    width: 5px;
    height: 5px;
    margin-top: 0.5em;
    background: #f00;
}

<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>

この例では:

• container-div は、箇条書きのマージンを作成するための追加のパディングを提供します。
• 箇条書きは、position:Absolute を使用して、container-div 内に絶対的に配置されます。
• テキストは、コンテナ内の row2 div に配置されます。 -div.

このアプローチでは、次のように、箇条書き項目の折り返された行が最初の行と揃えられるようになります。希望します。

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