[TIL #3] List

一般的なulliリストをユニークに飾ります.

<style>
ul {
    list-style: none;
    border-left: 3px solid black;
   }
</style>

liを包むulラベルの左側の枠線を追加します.
「小円」の代わりに「縦線」を用いて設計した.

コンテンツが枠線から離れているのは、ブラウザがulラベルのpaddingを強制的に付与しているからです.

ブラウザでは、デフォルトでは、余白、paddingなどが指定されます.

<style>
ul {
    list-style: none;
    border-left: 3px solid black;
    padding-left: 7px;
   }
</style>

左のパッドで間隔を調整してみます.
以前より明らかに減ったような気がします.

今回は上下目次の間で少し間隔を置きます.

<style>
ul {
    list-style: none;
    border-left: 3px solid black;
    padding-left: 7px;
   }
li {
    padding-bottom: 15px;
   }
</style>

Li枠がないので、余白と塗りつぶしで
どんな財産を使っても構わない!

はすべてのliを隔てており、反応底部から線が溢れていることが分かった.

JavaScript DOMオブジェクトから学習したchild概念は,最後のliの底辺を取り除く.

<style>
ul {
    list-style: none;
    border-left: 3px solid black;
    padding-left: 7px;
   }
li {
    padding-bottom: 15px;
   }
li:last-child {
    padding-bottom: 0;
   }
</style>

最後のリスト(last-child)を使用して縮小できます.

Reference

この問題について([TIL #3] List), 我々は、より多くの情報をここで見つけました https://velog.io/@whoyoung90/TIL-3-List

---

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol