Wo kommen die Kugeln her Elemente?

Lesezeit: 8 Minuten

Benutzer-Avatar
temporärer_benutzername

Mein aktuelles Verständnis ist, dass verschiedene HTML-Elemente in ihrer Funktionalität durch ihr Standard-CSS-Styling getrennt sind, Semantik beiseite.

Mit benutzerdefiniertem CSS könnten Sie (unratsamerweise) dafür sorgen, dass sich jedes HTML-Element wie jedes andere verhält.

Wenn das stimmt, kann ich mir nur die Kugeln nicht erklären <li> Elemente. Welches CSS verursacht sie? Wie können Sie das zu anderen Elementen hinzufügen?


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

  • developer.mozilla.org/en-US/docs/Web/CSS/list-style

    – Aufkleber

    5. Mai 2015 um 20:43 Uhr

  • Die Kugeln kommen aus list-styleeine Abkürzung für list-style-type, list-style-image und list-style-position.

    – Frottee

    5. Mai 2015 um 20:44 Uhr

  • Sie sind generierte Inhalte

    – Steveax

    6. Mai 2015 um 4:44 Uhr


  • Danke für dein großzügiges Kopfgeld, Aerovistae! Ich schätze Ihre Freundlichkeit sehr und bin froh, dass ich Ihre Frage klären konnte 🙂 Ich wünsche Ihnen einen schönen Tag!!

    – Bytecode77

    17. Mai 2015 um 17:10 Uhr

Benutzer-Avatar
Bytecode77

Die Kugeln sind “innerhalb” der Polsterung von enthalten <ul> Element:

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

1

Das Verringern der Polsterung zeigt, dass sich die Kugeln “innerhalb” dieser Polsterung befinden:

4

Erhöhung der Marge der <ul> zum Beispiel verschiebt es nach rechts.

2

Das list-style Die Eigenschaft steuert die Kugeln selbst. Einstellen auf none wird sie verstecken. Sie müssten den Rand und die Auffüllung auf einstellen 0 wenn Sie auch den Einzug loswerden möchten.

ul
{
    list-style: none;
}

3

Wenn Sie alle Ränder / Auffüllungen und die Aufzählungszeichen loswerden 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>

  • Ich bin mir nicht sicher, ob die Aussage “Die Kugeln sind in der Polsterung” richtig ist? Was passiert, wenn Sie die Polsterung auf 0 setzen, aber den Rand auf beispielsweise 20 Pixel? Ich bin von einem Desktop weg und kann mich daher nicht selbst testen.

    – EyasSH

    6. Mai 2015 um 0:58 Uhr

  • Und könnten Sie zeigen, wie Sie die Aufzählungszeichen zu anderen Elementen HINZUFÜGEN würden, nur um dies vollständig zu verstehen? So wie ein Div von Spannen sich wie eine Ul von Lis verhalten soll.

    – temporärer_Benutzername

    6. Mai 2015 um 14:07 Uhr

  • Das ist so eine unglaublich klare und ausgezeichnete Antwort. Ich werde dem ein Kopfgeld auszahlen, wenn es möglich wird. Übrigens, wann hat StackOverflow Snippets hinzugefügt? Das ist das erste, das ich gesehen habe.

    – temporärer_Benutzername

    6. Mai 2015 um 16:32 Uhr


  • Listenstil-Typ bullet existiert nicht. Du solltest benutzen disc . Chrome zeigt immer noch Aufzählungszeichen, Firefox jedoch nicht.

    – Artjom

    13. Mai 2015 um 11:23 Uhr

  • @Aerovistae Es ist generierter Inhalt und das Standard-Erscheinungsbild ist das des Betriebssystems – 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

    30. Mai 2015 um 19:54 Uhr

Benutzer-Avatar
EyasSH

Browser haben normalerweise ein „Standard-Stylesheet“ – eine Reihe von CSS-Stilen, die auf bestimmte HTML-Elemente angewendet werden. Werfen Sie einen Blick auf die Firefox-Standardstile, Die Standardstile von Chromeund Die Standardstile von IE.

Typischerweise ein <ul> -Tag hat die folgenden überschreibbaren CSS-Standardstile:

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 neben dem Objekt ein Disc-Symbol erscheint.
  • list-style-position und list-style-image sind ungesetzt. Ihre Standardwerte sind outside und none, beziehungsweise. Dies bedeutet, dass die disc Das oben definierte Symbol wird angezeigt links des li -Element (in den meisten Sprachen) und stören nicht die li Schaukasten selbst.
  • Das margin und padding Einstellungen den Inhalt richtig platzieren.

Ein <li> Tag wie folgt:

li {
  display: list-item;
}
  • display: list-item ist ähnlich wie display: block; und ermöglicht, dass die separaten Listenelemente in verschiedenen Zeilen erscheinen.

Benutzer-Avatar
Alex

Die runden Kugeln für <li> elements ist nur die Standardeinstellung 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 einen CSS-Reset http://cssreset.com/ oder Bootstrap-CSS.

Der Stil für <li> wird definiert durch die <ul> oder <ol> umgibt es. 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>

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

Die Kugeln stammen von ul-Elementen. Sie können sie mit den Eigenschaften list-style-type oder list-style-image ändern

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 hinzuzufügen <style="display: list-item; list-style-type:disc;"> an <p> Elemente und bekam keine Kugeln. (Nur mit Chrome getestet).

Sie könnten tatsächlich Aufzählungszeichen hinzufügen (&bull;) manuell oder programmgesteuert an den Anfang jedes p-Elements und stellen Sie den Rand und die Auffüllung so ein, dass sie wie ein UL/LI-Block aussehen, denke ich.

  • 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 müssten eine haben display: unordered-list; -Eigenschaft, die für das übergeordnete Element der Absätze verfügbar ist, um Aufzählungszeichen (oder eine ordered-list um eine automatische Nummerierung zu erhalten).

    – Stan Rogers

    5. Mai 2015 um 23:23 Uhr

  • Hast du irgendwelche Polsterung hinzugefügt <p> Elemente? Eine andere Antwort erwähnt, dass, wenn Sie die Polsterung genug absenken <li> Elemente verschwindet die Kugel.

    – Mitchell Caroll

    6. Mai 2015 um 0:14 Uhr

  • Das Elternteil des <p> Element, auf dem Sie dies getestet haben, hätte bekommen sollen list-style-type: disc;nicht der <p> Element selbst. Das <p> Element sollte nur erhalten: display: list-item;.

    – EyasSH

    6. Mai 2015 um 5:08 Uhr


  • bekam keine Kugeln — Die Kugeln könnten sich außerhalb der linken Seite des Bildschirms befinden. Versuchen Sie, einen linken Abstand oder Rand hinzuzufügen.

    – Salmann A

    12. Mai 2015 um 13:04 Uhr


Die Aufzählungszeichen auf Listenelementen sind ein Beispiel dafür generierte Inhalte. Weitere Beispiele für generierten Inhalt sind die Zahlen in geordneten Listen, CSS-Zähler und die :before und :after Pseudo-Elemente.

Welches CSS verursacht sie?

Einstellung display: list-item auf einem Element wird es Aufzählungszeichen anzeigen. Du kannst Ändere das Aussehen und die Position zu.

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 Kontrolle würde ich vorschlagen, dass Sie Pseudoelemente verwenden (und CSS-Zähler, wenn Sie zählen möchten).

  • 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 müssten eine haben display: unordered-list; -Eigenschaft, die für das übergeordnete Element der Absätze verfügbar ist, um Aufzählungszeichen (oder eine ordered-list um eine automatische Nummerierung zu erhalten).

    – Stan Rogers

    5. Mai 2015 um 23:23 Uhr

  • Hast du irgendwelche Polsterung hinzugefügt <p> Elemente? Eine andere Antwort erwähnt, dass, wenn Sie die Polsterung genug absenken <li> Elemente verschwindet die Kugel.

    – Mitchell Caroll

    6. Mai 2015 um 0:14 Uhr

  • Das Elternteil des <p> Element, auf dem Sie dies getestet haben, hätte bekommen sollen list-style-type: disc;nicht der <p> Element selbst. Das <p> Element sollte nur erhalten: display: list-item;.

    – EyasSH

    6. Mai 2015 um 5:08 Uhr


  • bekam keine Kugeln — Die Kugeln könnten sich außerhalb der linken Seite des Bildschirms befinden. Versuchen Sie, einen linken Abstand oder Rand hinzuzufügen.

    – Salmann A

    12. Mai 2015 um 13:04 Uhr


1312810cookie-checkWo kommen die Kugeln her Elemente?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy