Woher kommen die Kugeln auf <li> Elementen?

76

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 .

html  css 
— temporärer_Benutzername
quelle
4
— Aufkleber
2
Die Kugeln kommen aus list-style, eine Abkürzung für list-style-type, list-style-imageund list-style-position.
— Terry
4
Sie werden Inhalt generiert
— Steveax
1
Vielen Dank für Ihre großzügige Prämie, Aerovistae! Ich schätze deine Freundlichkeit sehr und bin froh, dass ich deine Frage klären konnte :) Ich wünsche dir einen schönen Tag !!
— Bytecode77

Antworten:

77

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

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

1

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

4

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

2

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;
}

3

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;
}

5

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>
Erweitern Sie das Snippet

— Bytecode77
quelle
2
Ich bin nicht sicher, ob die Aussage "Die Kugeln sind in der Polsterung" korrekt ist. Was passiert, wenn Sie die Auffüllung auf 0, den Rand beispielsweise auf 20 Pixel einstellen? Ich bin nicht auf einem Desktop, kann mich also nicht testen.
— EyasSH
1
Und könnten Sie zeigen, wie Sie die Kugeln anderen Elementen hinzufügen würden, nur um dies vollständig zu erfassen? Als ob sich ein Teil von Spannen wie ein Ul von Lis verhält.
— temporärer_Benutzername
1
Dies ist eine unglaublich klare und ausgezeichnete Antwort. Ich werde diesem ein Kopfgeld gewähren, wenn es möglich wird. Übrigens, wann hat StackOverflow Snippets hinzugefügt? Dies ist das erste Mal, dass ich einen gesehen habe.
— temporärer_Benutzername
2
Listenstil-Typ bullet existiert nicht . Sie sollten verwenden disc. Chrome zeigt immer noch Aufzählungszeichen an, Firefox jedoch nicht.
— Artyom
1
@Aerovistae Es ist generierter Inhalt und der Standard-Look ist der vom Betriebssystem - Es ist einfach eine Schaltfläche. Aber CSS kann angewendet werden. Der Browser verarbeitet das CSS und wendet es auf das UI-Element an.
— Bytecode77
29

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.
— EyasSH
quelle
5

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>
Erweitern Sie das Snippet

— Alex
quelle
3

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 &bull;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.

— David
quelle
1
Es ist nicht so sehr, dass LI ein Sonderfall ist, sondern dass der Listenstil eher von der übergeordneten Liste als vom Listenelement bestimmt wird. Sie benötigen eine display: unordered-list;Eigenschaft, die dem übergeordneten ordered-listElement der Absätze zur Verfügung steht, um Aufzählungszeichen abzurufen (oder eine , um die automatische Nummerierung zu erhalten).
— Stan Rogers
Haben Sie den <p>Elementen Polster hinzugefügt ? In einer anderen Antwort wird erwähnt, dass <li>die Kugel verschwindet , wenn Sie die Polsterung der Elemente ausreichend verringern.
— Mitchell Carroll
Das übergeordnete<p> Element des Elements, auf dem Sie dies getestet haben list-style-type: disc;, sollte erhalten haben , nicht das <p>Element selbst. Das <p>Element sollte nur bekommen : display: list-item;.
— EyasSH
hat keine Kugeln bekommen - die Kugeln könnten sich außerhalb der linken Seite des Bildschirms befinden. Versuchen Sie, die linke Polsterung oder den linken Rand hinzuzufügen.
— Salman A
2

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>
Erweitern Sie das Snippet

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

— Salman A.
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.