これまでリストの行頭を揃える際には、text-indentプロパティを使っていました。
しかし数値がずれたり、CSSを調整するのが個人的に面倒だったので、今回はもっと簡単にリストの行頭を揃える方法をまとめました。
行頭を揃える実装はサイト制作の案件で頻繁に出てくるので、是非コーディングできるようになっておきたいですね。
【CSS】リストの行頭を揃える方法
デモサイトはこちら。
See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.
ブラウザ幅を小さくしていっても行頭が常に揃っていることが分かるでしょう。
画像もフルパスなので、そのままコピペすることもできます。
HTML
<ul>
<li>
<div class="img">
<img src="https://yujiromx.com/wp-content/uploads/2022/05/sample.png" alt="" width="30">
</div>
<p>デモテキストが入ります。デモテキストが入ります。</p>
</li>
<li>
<div class="img">
<img src="https://yujiromx.com/wp-content/uploads/2022/05/sample.png" alt="" width="30">
</div>
<p>デモテキストが入ります。デモテキストが入ります。デモテキストが入ります。</p>
</li>
<li>
<div class="img">
<img src="https://yujiromx.com/wp-content/uploads/2022/05/sample.png" alt="" width="30">
</div>
<p>デモテキストが入ります。デモテキストが入ります。デモテキストが入ります。デモテキストが入ります。</p>
</li>
</ul>
ulの中にliタグを用意し、liの中にアイコンを表示するdivとpタグを用意します。
CSS
ul {
margin: 50px 20px;
}
ul li {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-top: 10px;
font-size: 18px;
line-height: 1.5;
}
ul li .img {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
ul li .img img {
min-width: 30px;
}
ul li p {
margin-left: 10px;
}
行頭を揃えるポイントは、liタグの中にあるアイコンとテキストをフレックスボックスで横並びにすることです。
そうすることで縦のラインを調整したり、アイコンとテキストの幅を調整しやすくなります。
まとめ
以上が、「リストの行頭を揃える方法」でした。
簡単にできるので、是非真似してください。
