Das Problem, dass das Listensymbol bei Verwendung von list-style-position:outside in CSS nicht angezeigt wurde, wurde behoben

Als ich heute den Stil einer Website geändert habe, bin ich auf ein Problem gestoßen, egal wie ich die CSS-Attribute angepasst habe. Schließlich habe ich list-style-position geändert :outside to list- Bei style-position:inside wird das Listensymbol angezeigt. Um herauszufinden, warum „list-style-position:outside“ nicht angezeigt wird, habe ich immer wieder versucht, verschiedene CSS-Attribute zu löschen, um herauszufinden, warum „outside“ nicht angezeigt wurde. Ich habe jedoch nie eine eindeutige Antwort gefunden, aber das ist sicher ul Die li-Attribute width: 100% und padding: 0 haben einen gewissen Einfluss darauf, dass das Listensymbol nicht angezeigt wird. Wenn dieses Problem auftritt, achten Sie bitte auf diese beiden Attribute.

Das CSS2.0-Handbuch erklärt die beiden Parameter außen und innen wie folgt:

list-style-position : outside | inside

Wert:

außen: Standardwert. Die Listenelementmarkierung wird außerhalb des Textes platziert und der umgebende Text wird nicht entsprechend der Markierung

innen ausgerichtet: Die Listenelementmarkierung wird innerhalb des Textes platziert und der umgebende Text wird entsprechend der Markierung

Wie aus der obigen Definition hervorgeht, hat Padding immer noch Auswirkungen, aber ich konnte nicht herausfinden, was genau hier schief gelaufen ist, außer width:100% oder padding:0, und das Displayeffekt erzielt werden kann.

Aus Stilgründen habe ich

list-style-type auf den Wert von dezimalen arabischen Ziffern geändert, um die Anforderung zu erfüllen, Zeilen nicht automatisch umzubrechen Wenn die Listenzeile größer ist, werden die folgenden drei Parameter verwendet:

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

Es wurde jedoch festgestellt, dass die Liste nicht mehr mit arabischen Ziffern angezeigt wird, sondern alle zur Zahl 1 werden. Beim Löschen von overflow:hidden wurde das Problem gelöst, aber die Ellipsen konnten nicht herauskommen, also habe ich einen weiteren Hack gelernt, auf den ich in Zukunft achten muss.

Das obige ist der detaillierte Inhalt vonDas Problem, dass das Listensymbol bei Verwendung von list-style-position:outside in CSS nicht angezeigt wurde, wurde behoben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!