Heim > Web-Frontend > CSS-Tutorial > Kann der HTML-Listenstil entfernt werden? So entfernen Sie die kleinen schwarzen Flecken vor Li

Kann der HTML-Listenstil entfernt werden? So entfernen Sie die kleinen schwarzen Flecken vor Li

yulia
Freigeben: 2018-09-12 16:00:57
Original
19711 Leute haben es durchsucht

Bei der Arbeit verwenden wir häufig Listen, die in geordnete Listen unterteilt sind. Bei ungeordneten Listen werden durchgehende Punkte auf der Seite angezeigt. Manchmal möchte ich dies jedoch nicht. Ich halte es für überflüssig, dass die Punkte und fortlaufenden Nummern vor der Liste angezeigt werden. Kann ich den Listenstil entfernen? Wie entferne ich den Punkt vor li? Als nächstes geben Sie Beispiele und erklären diese mit Code und Bildern.

Sehen Sie sich dieses Beispiel an. Ich habe in der Antike eine ungeordnete Liste verwendet, um die Namen der vier Schönheiten zu schreiben. Mal sehen, welche Auswirkungen es hat, wenn der Listenstil nicht entfernt wird.

<ul>
   <li>西施</li>
   <li>王昭君</li>
   <li>貂蝉</li>
   <li>杨玉环</li>   
  </ul>
Nach dem Login kopieren

Rendering:

Kann der HTML-Listenstil entfernt werden? So entfernen Sie die kleinen schwarzen Flecken vor Li

Jetzt brauche ich die Punkte am Anfang der Liste nicht, wie soll ich sie entfernen?

Als Nächstes stellen wir verschiedene Methoden vor, um die kleinen Punkte am Anfang der Liste zu entfernen.

1. Schreiben Sie list-style:none in CSS; Sie können den Listenstil

 ul{list-style: none;}
Nach dem Login kopieren

Rendering entfernen:

Kann der HTML-Listenstil entfernt werden? So entfernen Sie die kleinen schwarzen Flecken vor Li

2. Fügen Sie list-style-type: none zu CSS hinzu. Es ist dasselbe wie die vorherige Methode, verwendet jedoch andere Attribute.

ul{list-style-type: none;}
Nach dem Login kopieren

3. Fügen Sie Listenstile direkt zum li-Tag hinzu. Die ersten beiden Stile dienen zum Entfernen von Punkten, die beiden letzteren werden jedoch nicht angezeigt.

<ul>
   <li style="list-style-type: none;">西施</li>
   <li style="list-style-type: none;">王昭君</li>
   <li>貂蝉</li>
   <li>杨玉环</li>   
  </ul>
Nach dem Login kopieren

Rendering:

Kann der HTML-Listenstil entfernt werden? So entfernen Sie die kleinen schwarzen Flecken vor Li

4. Natürlich können Sie dem Label auch einen Klassennamen geben und es beispielsweise im Folgenden formatieren Code, nur der erste Ali-Tag-Stil, natürlich ohne Punkt davor.

HTML-Teil:

<ul>
   <li class="a1">西施</li>
   <li>王昭君</li>
   <li>貂蝉</li>
   <li>杨玉环</li>   
  </ul>
Nach dem Login kopieren

CSS-Teil:

.a1{list-style-type: none;}
Nach dem Login kopieren

Rendering:

Kann der HTML-Listenstil entfernt werden? So entfernen Sie die kleinen schwarzen Flecken vor Li

Zusammenfassung: Das Obige stellt die CSS-Anleitung vor Um den Listenstil in li zu entfernen, können alle vier Methoden verwendet werden. Dies hängt von Ihren persönlichen Gewohnheiten ab. Ich hoffe, dieses Tutorial zum Entfernen des Punkts vor li kann Ihnen helfen!

Das obige ist der detaillierte Inhalt vonKann der HTML-Listenstil entfernt werden? So entfernen Sie die kleinen schwarzen Flecken vor Li. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage