ホームページ >ウェブフロントエンド >CSSチュートリアル >折り返された箇条書きリスト項目を最初の行に揃えるにはどうすればよいですか?
箇条書き項目の 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>
この例では:
このアプローチでは、次のように、箇条書き項目の折り返された行が最初の行と揃えられるようになります。希望します。
以上が折り返された箇条書きリスト項目を最初の行に揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。