2

ol,liなどの番号やマークの下までborderを表示したいとき…

 ol,liなどの番号やマークの下までborderを表示したいとき

ol,liタグで並べたリストに対し、区切り線を入れたいときに通常の指定では、リストマークの後ろから最後までのをリスト内容と認識し、左端がズレて区切り線が表示されてしまいます。こういった場合に、リストのマークの左端からきちんと最後の右端まで、ラインを引きたい時の方法をメモしておきます。まずは、通常指定の場合にどのような表示になるのかを確認していきます。

1.HTMLを記述

<ul>タグで囲った<li>を縦に並べます。

 

 2.CSSを記述

 このように通常通り記述した場合は下図のような表示になります。

 

inside-1

確認するとわかりますが、list-styleの黒丸よりも後ろから下線(border-bottom)がはじまっているので、左端のピンクの点線部分からはじまるように追記します。

 

2-2.CSSに追記

border-style-position: inside;

list-style-positionプロパティは、リストマークの表示位置を指定することができます。リスト要素の領域に対して、リストマークを内側に配置するか外側に配置するかを指定します。

 

  • list-style-type: inside; 内側
  • list-style-type: outside; 外側

 

 inside-2

下線がリストマークの下から始まるようになりました。しかし、リストマークが左端に寄ってしまっているので、<li>に対してpadding-leftを指定します。

 

2-3.CSSにさらに追記

 inside-3

 これで区切り線できちんと区切られた縦並びのリストが完成です。

2 Comments

  1. list-style-type: inside; 内側
    list-style-type: inside; 外側

    どっちも inside (笑)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > ol,liなどの番号やマークの下までborderを表示したいとき…