1. ホーム
  2. html

Where do the bullets come from on <li> elements?

2023-09-18 22:17:57

Question

My current understanding is that different HTML elements are separated in their functionality by their default CSS styling, semantics aside.

Using custom CSS, you could (inadvisably) make any HTML element behave like any other.

If that is correct, the only thing I cannot account for is the bullets on <li> elements. What CSS causes them? How can you add that to other elements?


Note to future readers: I recently learned HTML elements also differ by content categories .

How to solved?

The bullets are contained "within" the padding of <ul> 要素に含まれています。

パディングは緑、マージンはオレンジで表示されます。

パディングを減らすと、箇条書きがそのパディングの中に"あることがわかります。

のマージンを大きくする。 <ul> のマージンを大きくすると、右にずれる。

list-style プロパティは、弾丸そのものを制御します。これを none に設定すると非表示になります。また、マージンとパディングを 0 に設定する必要があります。

ul
{
    list-style: none;
}

<イグ

マージン/パディングをすべて取り除き、箇条書きにしたい場合は、これを使用します。

ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

<イグ


もちろん、他のHTMLコントロールに箇条書きを適用することも可能です。

div
{
    padding-left: 40px;
}
a
{
    display: list-item;
    list-style: disc;
}
<div>
    <a href="#">Item #1</a>
    <a href="#">Item #2</a>
    <a href="#">Item #3</a>
    <a href="#">Item #4</a>
</div>