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 .
list-style
, eine Abkürzung fürlist-style-type
,list-style-image
undlist-style-position
.Antworten:
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-style
Eigenschaft steuert die Kugeln selbst. Wenn Sie es aufnone
einstellen, werden sie ausgeblendet. Sie müssten den Rand und die Polsterung auf einstellen,0
wenn 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>
quelle
bullet
existiert nicht . Sie sollten verwendendisc
. Chrome zeigt immer noch Aufzählungszeichen an, Firefox jedoch nicht.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-position
undlist-style-image
sind nicht gesetzt. Die Standardwerte sindoutside
undnone
jeweils. Dies bedeutet, dass dasdisc
oben definierte Symbol (in den meisten Sprachen) links vomli
Element angezeigt wird und das nicht beeinträchtigtli
angezeigt wird Anzeigefeld selbst .margin
undpadding
Einstellungen platzieren den Inhalt richtig.Ein
<li>
Tag wie folgt:li { display: list-item; }
display: list-item
ähneltdisplay: block;
und ermöglicht, dass die separaten Listenelemente in verschiedenen Zeilen angezeigt werden.quelle
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
quelle
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 Beispielul.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>
quelle
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.quelle
display: unordered-list;
Eigenschaft, die dem übergeordnetenordered-list
Element der Absätze zur Verfügung steht, um Aufzählungszeichen abzurufen (oder eine , um die automatische Nummerierung zu erhalten).<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.<p>
Element des Elements, auf dem Sie dies getestet habenlist-style-type: disc;
, sollte erhalten haben , nicht das<p>
Element selbst. Das<p>
Element sollte nur bekommen :display: list-item;
.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
:before
und:after
Pseudoelemente.Wenn Sie
display: list-item
ein Element festlegen, werden Aufzählungszeichen angezeigt. Sie können auch das Aussehen und die Position ändern .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.
quelle