サブドメインはこんな時に使うと便利!さくらインターネットサーバーのサブドメイン作成方法も解説(他社取得ドメイン利用)
kanri
空創デザインオフィス
リスト(li)の2行目以降を1文字空けて、縦を綺麗に揃えたいのですが、どうしたら良いでしょうか?
クライアント様よりこのようなご質問をいただいたので、今回はこちらを実装していきたいと思います!
簡単に実装できます!
2行目は1文字空けたい(字下げしたい)箇所に、下記CSSを追加します。
1text-indent: -1em;
2padding-left: 1em;
▼HTML
1<ul>
2<li>テキストテキストテキストテキスト<br>
3テキストテキストテキストテキスト</li>
4<li>テキストテキストテキストテキスト<br>
5テキストテキストテキストテキスト</li>
6<li>テキストテキストテキストテキスト<br>
7テキストテキストテキストテキスト</li>
8</ul>
▼CSS
1ul {
2list-style: none;
3}
4ul li {
5text-indent: -1em;
6padding-left: 1em;
7}
8ul li:before {
9content:"・";
10}
こんな感じです!
リストの2行目以降を1文字空けるCSSの書き方はこちらです。
1text-indent: -1em;
2padding-left: 1em;
空創デザインオフィスでは、Webデザイナーを目指している方や、ホームページ(Webサイト)を作りたい方へのサポートなども行っております。下記よりお気軽にお問い合わせください!