Frage Woher kommen die Kugeln von
  • Elementen?

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

    Durch die Verwendung von benutzerdefiniertem CSS könnten Sie (wie nicht anders zu erwarten) dafür sorgen, dass sich jedes HTML-Element wie jedes andere verhält.

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


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


    76
    2018-05-05 20:40


    Ursprung


    Antworten:


    Die Kugeln sind "innerhalb" der Polsterung von <ul> Element:

    Das Padding ist grün und der Rand orange markiert:

    1

    Das Auffüllen des Padding zeigt, dass die Aufzählungszeichen "innerhalb" dieses Auffüllens sind:

    4

    Erhöhung der Marge der <ul> zum Beispiel, verschiebt es richtig.

    2

    Das list-style Eigenschaft steuert die Kugeln selbst. Einstellen auf none wird sie verstecken. Sie müssten den Rand und das Padding auf einstellen 0 wenn Sie den Einzug auch loswerden wollen.

    ul
    {
        list-style: none;
    }
    

    3

    Wenn Sie alle Ränder / Abstände und die Aufzählungszeichen loswerden möchten, verwenden Sie Folgendes:

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

    5


    Natürlich können Sie auch Aufzählungszeichen 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>


    77
    2018-05-05 20:50



    Browser haben in der Regel ein "Standard-Stylesheet" - eine Reihe von CSS-Stilen, die auf bestimmte HTML-Elemente angewendet werden. Sieh dir das an Firefox-Standardstile, Chrome-Standardstile, und IEs Standardstile.

    Normalerweise a <ul> Das Tag weist die folgenden standardmäßigen ü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 neben dem Element ein CD-Symbol angezeigt wird.
    • list-style-position und list-style-image sind nicht festgelegt. 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 nicht stören die li Box selbst anzeigen.
    • Das margin und padding Einstellungen platzieren den Inhalt richtig.

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

    29
    2018-05-05 20:44



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

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


    5
    2018-05-05 20:46



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

    Der Stil für <li> ist definiert durch die <ul> oder <ol> es umgeben. beispielsweise

    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>


    5
    2018-05-05 20:47



    Ich denke, die ursprüngliche Frage war wirklich, "wie kann ich Kugeln zu OTHER-Elementen hinzufügen, da CSS Ihnen erlaubt, irgendetwas zu stylen (wie p-Elemente), um wie etwas anderes (wie LI) auszusehen.

    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;"> auf <p> Elemente, und bekam keine Kugeln. (Nur mit Chrome getestet).

    Sie könnten tatsächlich Aufzählungszeichen hinzufügen (&bull;) Manuell oder programmatisch zum Anfang jedes p-Elements und Rand und Padding so einstellen, dass es wie ein UL / LI-Block aussieht, denke ich.


    3
    2018-05-05 21:29



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

    Was CSS verursacht sie?

    Rahmen display: list-item Auf einem Element werden die Kugeln angezeigt. Sie können ändere das Aussehen und die Position auch.

    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 Pseudo-Elemente (und CSS-Zähler, wenn Sie zählen wollen) verwenden.


    2
    2018-05-12 12:54