Mein derzeitiges Verständnis ist, dass verschiedene HTML-Elemente in ihrer Funktionalität durch ihr Standard-CSS-Design getrennt sind, abgesehen von der Semantik.

Mit benutzerdefiniertem CSS können Sie (nicht ratsam) festlegen, dass sich jedes HTML-Element wie jedes andere verhält.

Wenn das richtig ist, kann ich nur die Aufzählungszeichen auf <li>Elementen nicht erklären . Welches CSS verursacht sie? Wie können Sie das zu anderen Elementen hinzufügen?

Hinweis für zukünftige Leser: Ich habe kürzlich erfahren, dass sich HTML-Elemente auch nach Inhaltskategorien unterscheiden .

Die Aufzählungszeichen sind "innerhalb" der Auffüllung des <ul>Elements enthalten:

Die Polsterung ist grün und der Rand orange markiert:

Das Verringern der Polsterung zeigt, dass sich die Aufzählungszeichen "innerhalb" dieser Polsterung befinden:

Wenn Sie beispielsweise die Marge des <ul>erhöhen, wird sie nach rechts verschoben.

Die list-styleEigenschaft steuert die Kugeln selbst. Wenn Sie es auf noneeinstellen, werden sie ausgeblendet. Sie müssten den Rand und die Polsterung auf einstellen, 0wenn Sie auch den Einzug entfernen möchten.

ul
{
    list-style: none;
}

Wenn Sie alle Ränder / Auffüllungen und die Aufzählungszeichen entfernen möchten, verwenden Sie Folgendes:

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

Natürlich können Sie Aufzählungszeichen auch auf andere HTML-Steuerelemente anwenden:

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>

Browser haben normalerweise ein "Standard-Stylesheet" - eine Reihe von CSS-Stilen, die auf bestimmte HTML-Elemente angewendet werden. Sehen Sie sich die Firefox-Standardstile , die Chrome-Standardstile und die IE-Standardstile an .

In der Regel weist ein <ul>Tag die folgenden standardmäßig überschreibbaren CSS-Stile auf:

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 bewirkt, dass ein Disc-Symbol neben dem Element angezeigt wird.
• list-style-positionund list-style-imagesind nicht gesetzt. Die Standardwerte sind outsideund nonejeweils. Dies bedeutet, dass das discoben definierte Symbol (in den meisten Sprachen) links vom liElement angezeigt wird und das nicht beeinträchtigtli angezeigt wird Anzeigefeld selbst .
• Die marginund paddingEinstellungen platzieren den Inhalt richtig.

Ein <li>Tag wie folgt:

li {
  display: list-item;
}

• display: list-itemähnelt display: block;und ermöglicht, dass die separaten Listenelemente in verschiedenen Zeilen angezeigt werden.

Siehe diese Seite https://css-tricks.com/almanac/properties/l/list-style/

Die Kugeln stammen aus ul-Elementen. Sie können sie mithilfe der Eigenschaften list-style-type oder list-style-image ändern

Die runden Aufzählungszeichen für <li>Elemente sind nur die Standardeinstellungen des Browsers. Genauso wie es eine Standardschriftart, Schriftgröße, Unterstreichung für Links (blau) usw. hat. Um sicherzustellen, dass Sie die Standardeinstellungen des Browsers überschreiben, verwenden Sie ein CSS-Reset http://cssreset.com/ oder Bootstrap-CSS.

Der Stil für <li>wird durch das <ul>oder die <ol>Umgebung definiert . zum Beispiel

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>

Ich denke, die ursprüngliche Frage war wirklich: "Wie kann ich ANDEREN Elementen Aufzählungszeichen hinzufügen, da Sie mit CSS angeblich alles (wie p-Elemente) so gestalten können, dass es wie etwas anderes aussieht (wie LI).

Die Antwort scheint zu sein: LI ist ein Sonderfall, AFAIK. Könnte falsch sein. Ich habe versucht , das Hinzufügen <style="display: list-item; list-style-type:disc;">auf<p> Elemente, und nicht Kugeln erhalten. (Nur mit Chrome getestet).

Sie können •am Anfang jedes p-Elements manuell oder programmgesteuert Aufzählungszeichen ( ) hinzufügen und Rand und Abstand so einstellen, dass sie wie ein UL / LI-Block aussehen, denke ich.

Die Aufzählungszeichen in Listenelementen sind ein Beispiel für generierten Inhalt . Andere Beispiele für erzeugte Inhalte umfassen die Zahlen in geordneter Listen, CSS - Zähler und den :beforeund :afterPseudoelemente.

Welches CSS verursacht sie?

Wenn Sie display: list-itemein Element festlegen, werden Aufzählungszeichen angezeigt. Sie können auch das Aussehen und die Position ändern .

Wie können Sie das zu anderen Elementen hinzufügen?

Siehe Beispiele unten:

.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>

Für eine genauere Steuerung würde ich vorschlagen, dass Sie Pseudoelemente (und CSS-Zähler, wenn Sie zählen möchten) verwenden.