총알은 어디에서 왔습니까?

총알은 어디에서 왔습니까?

집단?

---

내 현재 이해는 다른 HTML 요소가 기본 CSS 스타일링, 의미론을 제외하고 기능면에서 분리된다는 것입니다.

사용자 정의 CSS를 사용하면 모든 HTML 요소가 다른 요소처럼 동작하도록 만들 수 있습니다.

그것이 맞다면, 내가 설명 할 수없는 유일한 것은 <li>요소에 대한 글 머리 기호입니다 . CSS의 원인은 무엇입니까? 다른 요소에 어떻게 추가 할 수 있습니까?

---

미래 독자를위한 참고 사항 : 최근에 배운 HTML 요소도 콘텐츠 범주에 따라 다릅니다 .

---

글 머리 기호는 <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>

---

브라우저에는 일반적으로 특정 HTML 요소에 적용되는 CSS 스타일 집합 인 "기본 스타일 시트"가 있습니다. Firefox 기본 스타일 , Chrome의 기본 스타일 , IE의 기본 스타일을 살펴보세요 .

일반적으로 <ul>태그에는 다음과 같은 재정의 가능한 기본 CSS 스타일이 있습니다.

ul {
  display: block;
  list-style-type: disc;
  margin-before: 1em; /* equivalent to margin-top in most languages */
  margin-after: 1em;  /* equivalent to margin-bottom in most languages */
  margin-start: 0px;  /* equivalent to margin-left in LTR */
  margin-end: 0px;    /* equivalent to margin-right in LTR */
  padding-start: 40px;/* equivalent to padding-left in LTR*/
}

• list-style-type: disc 항목 옆에 디스크 아이콘이 나타납니다.
• list-style-position및 list-style-image해제합니다. 기본값은 각각 outside및 none입니다. 이는 disc위에 정의 된 아이콘 이 요소 의 왼쪽li (대부분의 언어에서)에 나타나고 li디스플레이 상자 자체를 방해하지 않음을 의미합니다.
• margin및 padding설정이 제대로 내용을 배치.

<li>다음과 같은 태그 :

li {
  display: list-item;
}

• display: list-item유사 display: block;하며 별도의 목록 항목이 다른 행에 표시되도록합니다.

---

이 페이지 https://css-tricks.com/almanac/properties/l/list-style/ 참조

총알은 ul 요소에서 나옵니다. list-style-type 또는 list-style-image 속성을 사용하여 수정할 수 있습니다.

---

The round bullets for <li> elements is just the browser default. Just like it has a default font, fontsize, underline for links (blue), etc. To make sure you overwrite the browser defaults , use some css reset http://cssreset.com/ , or bootstrap css.

The style for <li> is defined by the <ul> or <ol> surounding it. for example

ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.upper-roman {list-style-type: upper-roman;}
ol.lower-alpha {list-style-type: lower-alpha;} 
ul.image{ list-style-image: url("//cdn.sstatic.net/stackoverflow/img/favicon.ico?v=6cd6089ee7f6");} 
ul.singleline { display:flex; list-style:none; } // css3 only

<ul class="circle">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ul class="square">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ol class="upper-roman">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>
<ol class="lower-alpha">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>
<ul class="image">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ul class="singleline">
    <li>One </li>
    <li>Two </li>
    <li>Three </li>
</ul>

---

I think the original question really was, "how can I add bullets to OTHER elements, since CSS supposedly lets you style anything (like p elements) to look like something else (like LI).

The answer seems to be, LI is a special case, AFAIK. Could be wrong. I tried adding <style="display: list-item; list-style-type:disc;"> on <p> elements, and didn't get bullets. (Tested with Chrome only).

You could actually add bullet characters (•) manually or programmatically to the start of each p element, and set margin and padding to look like a UL/LI block, I guess.

---

The bullets on list items are an example of generated content. Other examples of generated content include the numbers in ordered lists, CSS counters and the :before and :after pseudo-elements.

What CSS causes them?

Setting display: list-item on an element will make it display bullets. You can change the appearance and position too.

How can you add that to other elements?

See examples below:

.mylist.type1 > span {
  display: list-item;
  /* inside: the marker is placed inside the element box before its content */
  list-style-position: inside;
}
.mylist.type2 > span {
  display: list-item;
  /* outside (default): the marker is placed outside the element box towards left */
  /* by the way you are not restricted to just bullets */
  list-style-type: lower-roman;
}
.mylist.type2 {
  /* add some room on left for bullets positioned outside */
  padding-left: 2em;
}

<div class="mylist type1">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>
<hr>
<div class="mylist type2">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

For more precise control I would suggest that you use pseudo elements (and CSS counters if you want to count).

참고 URL : https://stackoverflow.com/questions/30062864/where-do-the-bullets-come-from-on-li-elements