{"id":123565,"date":"2025-03-03T08:22:30","date_gmt":"2025-03-03T06:22:30","guid":{"rendered":"https:\/\/elementor.com\/blog\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/"},"modified":"2026-01-09T19:35:31","modified_gmt":"2026-01-09T17:35:31","slug":"wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/","title":{"rendered":"Wie entfernt man Aufz\u00e4hlungspunkte in CSS? (li &amp; ol) Ungeordnete Liste ohne Aufz\u00e4hlungspunkte"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"123565\" class=\"elementor elementor-123565 elementor-1308\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-32fe359 e-flex e-con-boxed e-con e-parent\" data-id=\"32fe359\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-688f6f2 elementor-widget elementor-widget-text-editor\" data-id=\"688f6f2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">In diesem umfassenden Leitfaden werden wir in die Welt der CSS-Listenanpassung eintauchen. F\u00fcr WordPress-Nutzer werden wir aufzeigen, wie Elementor, der popul\u00e4re Website-Builder, diesen Prozess vereinfacht und Sie bef\u00e4higt, Ihre Designvision ohne umfangreiche Programmierkenntnisse zu verwirklichen.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Die Grundlagen der CSS-Listengestaltung<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Einf\u00fchrung in  &lt;ul&gt;,  &lt;ol&gt;, und  &lt;li&gt;  Tags<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Listen sind ein fundamentaler Eckpfeiler des Webdesigns. Sie helfen dabei, Informationen auf klare und strukturierte Weise zu organisieren, wodurch Ihre Website leichter zu lesen und zu verstehen ist. HTML bietet uns drei essentielle Tags zur Erstellung von Listen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;ul&gt;:<\/b><span style=\"font-weight: 400;\">  Steht f\u00fcr &#8222;ungeordnete Liste&#8220;. Dies ist Ihre bevorzugte Wahl f\u00fcr Aufz\u00e4hlungslisten, bei denen die Reihenfolge der Elemente keine spezifische Bedeutung hat.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;ol&gt;:<\/b><span style=\"font-weight: 400;\">  Steht f\u00fcr &#8222;geordnete Liste&#8220;. Verwenden Sie dies, wenn Sie Elemente in einer nummerierten Sequenz darstellen m\u00fcssen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>&lt;li&gt;:<\/b><span style=\"font-weight: 400;\">  Steht f\u00fcr &#8222;Listenelement&#8220;. Jedes Element, sei es ein Aufz\u00e4hlungspunkt oder ein nummeriertes Element, wird von &lt;li&gt; Tags umschlossen.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Beispiel einer HTML-Struktur<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd12913 elementor-widget elementor-widget-code-highlight\" data-id=\"bd12913\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<ul>\r\n  <li>Coffee<\/li>\r\n  <li>Tea<\/li>\r\n  <li>Milk<\/li>\r\n<\/ul>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9540e83 elementor-widget elementor-widget-text-editor\" data-id=\"9540e83\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Dieser einfache Code w\u00fcrde eine grundlegende ungeordnete Liste mit drei Aufz\u00e4hlungspunkten erstellen (\u2022 Kaffee, \u2022 Tee, \u2022 Milch).<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Die list-style-type Eigenschaft<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS (Cascading Style Sheets) ist die Sprache, die die visuelle Pr\u00e4sentation Ihrer Website steuert. Die list-style-type Eigenschaft ist Ihr Schl\u00fcsselwerkzeug zur Anpassung des Erscheinungsbildes dieser Aufz\u00e4hlungspunkte oder Nummern in Ihren Listen. Hier sind einige der gebr\u00e4uchlichsten Werte, die Sie verwenden werden:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>disc:<\/b><span style=\"font-weight: 400;\"> Der Standardstil zeigt ausgef\u00fcllte Kreise als Aufz\u00e4hlungspunkte an.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>circle:<\/b><span style=\"font-weight: 400;\"> Erzeugt hohle Kreise als Aufz\u00e4hlungspunkte.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>square:<\/b><span style=\"font-weight: 400;\"> Rendert quadratische Aufz\u00e4hlungspunkte.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>none:<\/b><span style=\"font-weight: 400;\">  Das Zauberwort! Dieser Wert entfernt Aufz\u00e4hlungspunkte oder Nummern vollst\u00e4ndig.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Lassen Sie uns sehen, wie dies in einem einfachen CSS-Beispiel funktioniert:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af93b55 elementor-widget elementor-widget-code-highlight\" data-id=\"af93b55\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nul {\r\n  list-style-type: none; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-98cb022 elementor-widget elementor-widget-text-editor\" data-id=\"98cb022\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Dieser Ausschnitt w\u00fcrde Aufz\u00e4hlungspunkte von ALLEN ungeordneten Listen (&lt;ul&gt;) auf Ihrer Website entfernen.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Gezielte Ansprache spezifischer Listen<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">W\u00e4hrend es n\u00fctzlich sein kann, alle Ihre Listen auf die gleiche Weise zu gestalten, werden Sie oft Aufz\u00e4hlungspunkte (oder deren Fehlen) auf einer genaueren Ebene anpassen wollen. Hier kommen CSS-Klassen und IDs ins Spiel.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Verwendung von Klassen<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Klassen erm\u00f6glichen es Ihnen, Stile auf mehrere Listen \u00fcber Ihre gesamte Website hinweg anzuwenden. So geht&#8217;s:<\/span><\/p>\n<h5><span style=\"font-weight: 400;\">F\u00fcgen Sie eine Klasse zu Ihrem HTML hinzu<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d08e7c3 elementor-widget elementor-widget-code-highlight\" data-id=\"d08e7c3\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<ul class=\"no-bullets\">\r\n  <li>Item One<\/li>\r\n  <li>Item Two<\/li>\r\n<\/ul>\r\n\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d06916 elementor-widget elementor-widget-text-editor\" data-id=\"3d06916\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5><span style=\"font-weight: 400;\">Gestalten Sie die Klasse in Ihrem CSS<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-098c433 elementor-widget elementor-widget-code-highlight\" data-id=\"098c433\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.no-bullets {\r\n  list-style-type: none; \r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa8a1bb elementor-widget elementor-widget-text-editor\" data-id=\"fa8a1bb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Nun werden nur Listen mit der Klasse no-bullets ihre Aufz\u00e4hlungspunkte entfernt haben.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Verwendung von IDs<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">IDs zielen auf eine spezifische Liste auf Ihrer Website ab. Verwenden Sie diese, wenn Sie eine einzigartige Gestaltung f\u00fcr eine einzelne Liste ben\u00f6tigen.<\/span><\/p>\n<h5><span style=\"font-weight: 400;\">F\u00fcgen Sie eine ID zu Ihrem HTML hinzu<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1c13c82 elementor-widget elementor-widget-code-highlight\" data-id=\"1c13c82\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<ul id=\"special-list\">\r\n  <li>Item One<\/li>\r\n  <li>Item Two<\/li>\r\n<\/ul>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d85b657 elementor-widget elementor-widget-text-editor\" data-id=\"d85b657\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5><span style=\"font-weight: 400;\">Gestalten Sie die ID in Ihrem CSS (beachten Sie das #-Symbol)<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d86aac9 elementor-widget elementor-widget-code-highlight\" data-id=\"d86aac9\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n#special-list {\r\n  list-style-type: square; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dfa31bf elementor-widget elementor-widget-text-editor\" data-id=\"dfa31bf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Wichtige Punkte, die es zu beachten gilt<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Klassen (gekennzeichnet durch .) dienen zur Gestaltung mehrerer Elemente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">IDs (gekennzeichnet durch #) werden verwendet, um ein einzigartiges Element zu gestalten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Sie k\u00f6nnen die Verwendung von Klassen und IDs f\u00fcr maximale Gestaltungsflexibilit\u00e4t mischen und kombinieren.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Entfernen von Aufz\u00e4hlungspunkten mit Elementor  <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Die St\u00e4rke von Elementor&#8217;s visuellem Editor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Falls die Vorstellung, CSS-Code zu schreiben, entmutigend erscheint, hat Elementor Sie abgedeckt! Seine intuitive visuelle Schnittstelle erm\u00f6glicht es Ihnen, Listen zu gestalten, einschlie\u00dflich der Entfernung von Aufz\u00e4hlungspunkten, mit nur wenigen Klicks. Hier liegt die Sch\u00f6nheit von Elementor:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Code-freie Anpassung:<\/b><span style=\"font-weight: 400;\"> Sie m\u00fcssen kein CSS-Experte sein, um professionell aussehende Ergebnisse zu erzielen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Live-Vorschauen:<\/b><span style=\"font-weight: 400;\"> Sehen Sie Ihre \u00c4nderungen in Echtzeit auf der Seite reflektiert, was Designanpassungen zum Kinderspiel macht.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Drag-and-Drop-Oberfl\u00e4che:<\/ci><ci id=\"gid_1\"> Die Erstellung Ihrer Website f\u00fchlt sich nat\u00fcrlich und intuitiv an.<\/ci><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Schritt-f\u00fcr-Schritt-Anleitung<\/span><\/h3>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Lokalisieren Sie das Listen-Widget:<\/ci><ci id=\"gid_1\"> Ziehen Sie innerhalb des Elementor-Editors das &#8218;Listen&#8216;-Widget per Drag-and-Drop auf Ihre Seite oder bearbeiten Sie eine bestehende Liste.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>\u00d6ffnen Sie die Stilsteuerungselemente:<\/b><span style=\"font-weight: 400;\">  Im linken Bedienfeld sehen Sie eine Reihe von Registerkarten zur Stilbearbeitung. Klicken Sie auf die Registerkarte &#8218;Stil&#8216;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Finden Sie list-style-type:<\/ci><ci id=\"gid_1\"> Unter dem Abschnitt &#8218;Typografie&#8216; finden Sie eine Option f\u00fcr &#8218;Listenstil-Typ&#8216;.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Auf &#8218;Keine&#8216; setzen:<\/ci><ci id=\"gid_1\"> Klicken Sie auf das Dropdown-Men\u00fc und w\u00e4hlen Sie die Option &#8218;Keine&#8216;.<\/ci><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Das war&#8217;s! Ihre Aufz\u00e4hlungszeichen werden wie von Zauberhand verschwinden. Sie k\u00f6nnen dieselbe Benutzeroberfl\u00e4che verwenden, um andere Stiloptionen zu erkunden, wie beispielsweise die \u00c4nderung der Farbe oder Gr\u00f6\u00dfe von nummerierten Listen.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Fortgeschrittene Anpassung innerhalb von Elementor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Elementors Liste an Stiloptionen geht \u00fcber die Grundlagen hinaus. Sie k\u00f6nnen Funktionen wie folgende erkunden:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Benutzerdefinierte Aufz\u00e4hlungszeichen-Bilder:<\/ci><ci id=\"gid_1\"> Wir werden dies in einem sp\u00e4teren Abschnitt betrachten.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Anpassung von Abst\u00e4nden und Einr\u00fcckungen:<\/ci><ci id=\"gid_1\"> F\u00fcr eine feinabgestimmte Kontrolle \u00fcber das Erscheinungsbild der Liste.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Stilisierung einzelner Listenelemente:<\/ci><ci id=\"gid_1\"> Erstellen Sie einzigartige Designs innerhalb einer einzelnen Liste.<\/ci><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Wenn Sie benutzerdefinierte Aufz\u00e4hlungszeichen oder wirklich fortgeschrittene Listentechniken erkunden m\u00f6chten, bieten Elementors Dokumentation und Community hilfreiche Tutorials und Codebeispiele, um Ihre F\u00e4higkeiten zu erweitern.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Beherrschung von CSS f\u00fcr vollst\u00e4ndige Kontrolle<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Verst\u00e4ndnis von Vererbung<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS hat eine hierarchische Natur, was bedeutet, dass Stile, die auf \u00fcbergeordnete Elemente angewendet werden, auf ihre verschachtelten untergeordneten Elemente \u00fcbertragen werden k\u00f6nnen. Dieses Konzept ist bei Listen wichtig:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>\u00dcbergeordnete Listen:<\/b><span style=\"font-weight: 400;\">  Wenn Sie ein  &lt;ul&gt;  oder  &lt;ol&gt; -Tag stilisieren, \u00fcbertragen sich diese Stile oft auf die einzelnen Listenelemente (&lt;li&gt;) darin.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">\u00dcberschreiben von Stilen:<\/ci><ci id=\"gid_1\"> Um bestimmte Listenebenen anders zu gestalten, m\u00fcssen Sie pr\u00e4zisere CSS-Selektoren verwenden.<\/ci><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Beispiel:<\/span><\/h3>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ba5bad0 elementor-widget elementor-widget-code-highlight\" data-id=\"ba5bad0\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nul {\r\n  list-style-type: square; \/* All lists will have square bullets *\/\r\n}\r\n\r\nul ul { \r\n  list-style-type: circle; \/* Nested lists will have circle bullets *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d2b046c elementor-widget elementor-widget-text-editor\" data-id=\"d2b046c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><ci id=\"gid_0\">In diesem Szenario h\u00e4tten Listen auf oberster Ebene quadratische Aufz\u00e4hlungszeichen, aber alle Listen, die <\/ci><ci id=\"gid_1\"><ci id=\"gid_2\">darin<\/ci><\/ci><ci id=\"gid_3\"> verschachtelt sind, w\u00fcrden zu kreisf\u00f6rmigen Aufz\u00e4hlungszeichen wechseln.<\/ci><\/p>\n<h3><span style=\"font-weight: 400;\">Die list-style-Kurzschreibweise<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">F\u00fcr effizientes CSS k\u00f6nnen Sie mehrere listenbezogene Eigenschaften in einer einzigen Deklaration mit der list-style-Kurzschreibweise kombinieren. Es funktioniert folgenderma\u00dfen:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-797e86a elementor-widget elementor-widget-code-highlight\" data-id=\"797e86a\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nul {\r\n  list-style: disc inside;\r\n}\r\nThis is equivalent to:\r\nCSS\r\nul {\r\n  list-style-type: disc; \r\n  list-style-position: inside; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f3ebe0e elementor-widget elementor-widget-text-editor\" data-id=\"f3ebe0e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Lassen Sie uns das aufschl\u00fcsseln:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">List-style-type<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Das haben wir bereits behandelt! Legt den Stil der Aufz\u00e4hlungszeichen\/Nummerierung fest (z.B. disc, square, none).<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">List-style-position<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Steuert, wo sich das Aufz\u00e4hlungszeichen relativ zum Text befindet.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Inside platziert das Aufz\u00e4hlungszeichen innerhalb des Inhaltsflusses des Listenelements.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Outside platziert das Aufz\u00e4hlungszeichen au\u00dferhalb des regul\u00e4ren Inhaltsflusses und schafft mehr Freiraum.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Ersetzen von Aufz\u00e4hlungszeichen durch benutzerdefinierte Bilder<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Die list-style-image-Eigenschaft er\u00f6ffnet eine Welt visueller M\u00f6glichkeiten f\u00fcr Ihre Listen. So tauschen Sie langweilige Aufz\u00e4hlungszeichen gegen auff\u00e4llige Grafiken aus:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Quellbild ausw\u00e4hlen:<\/b><span style=\"font-weight: 400;\">  Finden oder erstellen Sie ein kleines Bild, das zu Ihrem Designstil passt. Symbole, Pfeile oder einfache Formen eignen sich gut. Beachten Sie die Dateigr\u00f6\u00dfe f\u00fcr eine optimale Seitenladegeschwindigkeit.<\/span><\/li>\n<\/ol>\n<p><ci id=\"gid_0\">Verwenden Sie die list-style-image-Eigenschaft:<\/ci><ci id=\"gid_1\"> F\u00fcgen Sie diese Deklaration zu Ihrer CSS-Regel hinzu:<\/ci><span style=\"font-weight: 400;\"><br \/><\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-57531f2 elementor-widget elementor-widget-code-highlight\" data-id=\"57531f2\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp> CSS\r\nul {\r\n  list-style-image: url('path\/to\/your\/image.png'); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9852b75 elementor-widget elementor-widget-text-editor\" data-id=\"9852b75\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Ersetzen Sie &#8218;path\/to\/your\/image.png&#8216; durch den tats\u00e4chlichen Dateipfad oder die Web-URL Ihres gew\u00e4hlten Bildes.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Bildgr\u00f6\u00dfenanpassung und -positionierung<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Sie m\u00f6chten wahrscheinlich eine gewisse Kontrolle dar\u00fcber haben, wie Ihre benutzerdefinierten Bilder erscheinen. Experimentieren Sie mit diesen zus\u00e4tzlichen Eigenschaften:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">List-style-position: <\/ci><ci id=\"gid_1\">Wir haben dies bereits fr\u00fcher besprochen, aber<\/ci> <ci id=\"gid_2\">inside oder outside wird die Bildplatzierung beeinflussen.<\/ci><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><ci id=\"gid_0\">Hintergrund-Eigenschaften:<\/ci><ci id=\"gid_1\"> Wenn Sie eine komplexere Positionierung ben\u00f6tigen, behandeln Sie das Bild wie einen Hintergrund mit background-size, background-repeat und background-position.<\/ci><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Beispiel<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-983bc38 elementor-widget elementor-widget-code-highlight\" data-id=\"983bc38\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nul {\r\n  list-style-image: url('checkmark.svg'); \r\n  list-style-position: inside;\r\n  background-repeat: no-repeat; \/* Prevent the image from tiling *\/\r\n  background-position: 0 50%;   \/* Position the image in the center *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6eddf24 elementor-widget elementor-widget-text-editor\" data-id=\"6eddf24\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Wichtiger Hinweis:<\/b><span style=\"font-weight: 400;\">  Stellen Sie immer eine Fallback-Option mit list-style-type bereit, falls das Bild nicht geladen werden kann. Dies stellt sicher, dass Ihre Liste weiterhin etwas visuell Sinnvolles anzeigt.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Fehlerbehebungstipps<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Selbst bei sorgf\u00e4ltiger CSS-Anwendung k\u00f6nnen manchmal unerwartete Dinge passieren, und Ihre Aufz\u00e4hlungszeichen kooperieren m\u00f6glicherweise nicht. Hier ist ein Fehlerbehebungs-Toolkit, das Sie im Hinterkopf behalten sollten:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Browser-Inkonsistenzen<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Geringf\u00fcgige Darstellungsunterschiede zwischen Webbrowsern (Chrome, Firefox, Safari, etc.) k\u00f6nnen auftreten. Testen Sie Ihre Website in mehreren Browsern, um ungew\u00f6hnliches Stilverhalten zu erkennen.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Widerspr\u00fcchliche Stile<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Sollten Sie mehrere CSS-Dateien oder Stylesheets verwenden, besteht die M\u00f6glichkeit einer gegenseitigen Beeinflussung. Nutzen Sie die Entwicklertools Ihres Browsers (\u00fcblicherweise durch Rechtsklick und Auswahl von &#8222;Untersuchen&#8220; zug\u00e4nglich), um zu ermitteln, welche Stile tats\u00e4chlich auf Ihre Listen angewendet werden.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Spezifit\u00e4t:<\/b><span style=\"font-weight: 400;\"> Spezifischere CSS-Selektoren haben Vorrang. Stellen Sie sicher, dass Ihre Regeln zur Formatierung von Aufz\u00e4hlungszeichen die korrekten Listen mit ausreichender Spezifit\u00e4t ansprechen, um etwaige Standardeinstellungen zu \u00fcberschreiben.<\/span><\/li>\n<\/ul>\n<p><b>!important &#8211; Vorsicht:<\/b><span style=\"font-weight: 400;\"> Wenngleich die !important-Deklaration Stile zwangsweise \u00fcberschreiben kann, ist von einer \u00fcberm\u00e4\u00dfigen Verwendung abzuraten. Eine zur\u00fcckhaltende Anwendung kann die langfristige Wartbarkeit Ihres CSS erleichtern.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">H\u00e4ufige Szenarien<\/span><\/h3>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Wiedererscheinen von Aufz\u00e4hlungszeichen:<\/b><span style=\"font-weight: 400;\"> \u00dcberpr\u00fcfen Sie, ob \u00fcbergeordnete Listenstile Vererbungsprobleme verursachen. Passen Sie Ihr CSS an, um gezielt die Listen zu modifizieren, die Sie ver\u00e4ndern m\u00f6chten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Nicht erscheinende Bilder:<\/b><span style=\"font-weight: 400;\"> \u00dcberpr\u00fcfen Sie sorgf\u00e4ltig Ihre Dateipfade! Ein einziges falsches Zeichen kann die Verkn\u00fcpfung unterbrechen. Ber\u00fccksichtigen Sie auch das Browser-Caching \u2013 mitunter ist eine erzwungene Aktualisierung (Strg+F5 oder Cmd+Shift+R) erforderlich, um das Bild zu laden.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Unerwartete Positionierung:<\/b><span style=\"font-weight: 400;\"> Stellen Sie sicher, dass Ihre list-style-position und zus\u00e4tzliche Hintergrund-Eigenschaften harmonisch zusammenwirken, um Ihre Bilder wie gew\u00fcnscht zu platzieren.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Entwicklertools sind Ihre wichtigsten Verb\u00fcndeten bei der Fehlersuche in CSS. Erlernen Sie deren effektive Nutzung, und Sie werden Gestaltungsr\u00e4tsel mit Leichtigkeit l\u00f6sen!<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Jenseits der Entfernung von Aufz\u00e4hlungszeichen: Kreative Listengestaltung<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Horizontale Listen<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">In manchen F\u00e4llen ist es angebracht, von dem traditionellen vertikalen Listenformat abzuweichen und Ihre Elemente horizontal anzuordnen. CSS-Flexbox- und Inline-Block-Techniken bieten hervorragende L\u00f6sungsans\u00e4tze:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">CSS-Flexbox-Methode<\/span><\/h4>\n<p><b>Umschlie\u00dfen Ihrer Liste:<\/b><span style=\"font-weight: 400;\"> Umschlie\u00dfen Sie Ihre  &lt;ul&gt;  oder  &lt;ol&gt;  mit einem Container-Element (\u00fcblicherweise einem  &lt;div&gt;).<\/span><\/p>\n<h5><span style=\"font-weight: 400;\">Anwendung von Flexbox-Eigenschaften<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee1e19e elementor-widget elementor-widget-code-highlight\" data-id=\"ee1e19e\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.horizontal-list-container {\r\n  display: flex; \/* Activate flexbox layout *\/\r\n  flex-direction: row; \/* Arrange items in a row *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6662cad elementor-widget elementor-widget-text-editor\" data-id=\"6662cad\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Inline-Block-Methode<\/span><\/h4>\n<h5><span style=\"font-weight: 400;\">Zielausrichtung auf Listenelemente<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35bb678 elementor-widget elementor-widget-code-highlight\" data-id=\"35bb678\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp> CSS\r\nul li {\r\n  display: inline-block; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6338180 elementor-widget elementor-widget-text-editor\" data-id=\"6338180\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Wichtig!<\/b><span style=\"font-weight: 400;\"> Bei beiden Methoden wird es h\u00f6chstwahrscheinlich erforderlich sein, Abst\u00e4nde und Polsterungen anzupassen, um den Zwischenraum zwischen Ihren horizontalen Listenelementen pr\u00e4zise einzustellen.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Anpassung von Abst\u00e4nden, Polsterungen und Einr\u00fcckungen<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Lassen Sie uns die Kontrolle \u00fcber die Abst\u00e4nde um Ihre Listenelemente \u00fcbernehmen, um ein ausgefeiltes Erscheinungsbild zu erzielen:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Abst\u00e4nde:<\/b><span style=\"font-weight: 400;\"> Abst\u00e4nde erzeugen Raum <\/span><i><span style=\"font-weight: 400;\">au\u00dferhalb<\/span><\/i><span style=\"font-weight: 400;\">  der Begrenzung eines Elements. Verwenden Sie Eigenschaften wie margin-top, margin-right usw., um den Abstand zwischen Listenelementen oder der gesamten Liste und dem umgebenden Inhalt zu steuern.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Polsterung:<\/b><span style=\"font-weight: 400;\"> Polsterung erzeugt Raum <\/span><i><span style=\"font-weight: 400;\">innerhalb<\/span><\/i><span style=\"font-weight: 400;\">  der Begrenzung eines Elements. Nutzen Sie die padding-Eigenschaft, um Freiraum um den Textinhalt jedes Listenelements zu schaffen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Texteinr\u00fcckung:<\/b><span style=\"font-weight: 400;\"> Verwenden Sie die text-indent-Eigenschaft, um den Beginn Ihres Listenelement-Textes pr\u00e4zise zu justieren. Ein negativer Wert kann den Text vom Aufz\u00e4hlungszeichen weg verschieben und somit eine st\u00e4rkere visuelle Trennung bewirken.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Beispiel<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd8566b elementor-widget elementor-widget-code-highlight\" data-id=\"fd8566b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nul li {\r\n  margin-right: 20px; \/* Space between list items *\/\r\n  padding: 10px; \/* Internal spacing for visual comfort *\/\r\n  text-indent: -5px; \/* Shift text slightly to the right *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cabb749 elementor-widget elementor-widget-text-editor\" data-id=\"cabb749\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Beste Praktiken f\u00fcr Barrierefreiheit<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Bei der visuellen Verbesserung Ihrer Listen ist es unerl\u00e4sslich, Nutzer mit Beeintr\u00e4chtigungen zu ber\u00fccksichtigen. Hier sind die Schwerpunkte:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Semantisches HTML:<\/b><span style=\"font-weight: 400;\"> Die korrekte Verwendung von  &lt;ul&gt;,  &lt;ol&gt;, und  &lt;li&gt; -Tags informiert assistive Technologien (wie Screenreader) dar\u00fcber, dass es sich um eine Liste handelt. Diese strukturelle Information ist von unsch\u00e4tzbarem Wert f\u00fcr die Navigation und das Verst\u00e4ndnis Ihres Inhalts.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Vermeiden Sie die ausschlie\u00dfliche Abh\u00e4ngigkeit von visuellen Hinweisen:<\/b><span style=\"font-weight: 400;\"> Wenn Sie Aufz\u00e4hlungszeichen entfernen, stellen Sie sicher, dass eine ausreichende visuelle Unterscheidung zwischen den Listenelementen besteht. Angemessene Abst\u00e4nde, Schrift\u00e4nderungen oder Umrandungen k\u00f6nnen f\u00fcr diejenigen hilfreich sein, die m\u00f6glicherweise Schwierigkeiten haben, die Standardformatierung deutlich wahrzunehmen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Screenreader-Tests:<\/b><span style=\"font-weight: 400;\"> Experimentieren Sie mit Screenreader-Software (wie NVDA oder VoiceOver), um aus erster Hand zu erfahren, wie Ihre Listen Nutzern mit Sehbeeintr\u00e4chtigungen pr\u00e4sentiert werden.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Wann man Aufz\u00e4hlungszeichen NICHT entfernen sollte<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Es gibt Situationen, in denen traditionelle Aufz\u00e4hlungszeichen oder Nummerierungen einen eindeutigen Zweck erf\u00fcllen:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Klarheit und \u00dcbersichtlichkeit:<\/b><span style=\"font-weight: 400;\"> F\u00fcr einfache Listen, bei denen die Reihenfolge unerheblich ist (z.B. Zutatenlisten, Merkmalslisten), unterst\u00fctzen Aufz\u00e4hlungszeichen die schnelle visuelle Erfassung von Informationen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Priorisierung der Reihenfolge:<\/b><span style=\"font-weight: 400;\"> Geordnete Listen sind essenziell f\u00fcr Anweisungen, Schritte oder Rangfolgen, bei denen die Sequenz von Bedeutung ist.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Gestaltung von Navigationsmen\u00fcs<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Listen bilden das R\u00fcckgrat vieler Website-Navigationsmen\u00fcs. Lassen Sie uns einige g\u00e4ngige Anwendungsf\u00e4lle betrachten:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Navigation auf oberster Ebene:<\/b><span style=\"font-weight: 400;\"> H\u00e4ufig als horizontale Listen f\u00fcr die Hauptabschnitte der Website gestaltet.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Dropdown-Men\u00fcs:<\/b><span style=\"font-weight: 400;\"> Verwenden verschachtelte Listen, um Unterkategorien beim \u00dcberfahren oder Anklicken eines Elements der obersten Ebene anzuzeigen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Mobile Men\u00fcs:<\/b><span style=\"font-weight: 400;\"> Kreative Listengestaltung kann eine <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"How To Create A Responsive Website: Step-By-Step 2026 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"33328\">responsive<\/a> Navigation erm\u00f6glichen, die sich auf kleineren Bildschirmen zu einem &#8222;Hamburger&#8220;-Men\u00fc zusammenfaltet.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Elementor vereinfacht die Erstellung von barrierefreien, \u00e4sthetisch ansprechenden Navigationsmen\u00fcs mit zahlreichen Anpassungsm\u00f6glichkeiten.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Gestaltungstipps und Inspiration <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Visuelle Beispiele<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Ein Bild sagt mehr als tausend Worte, daher werden wir in diesem Abschnitt einige visuelle Beispiele einf\u00fcgen. Dies k\u00f6nnten Screenshots oder eingebettete Bilder sein, die Folgendes zeigen:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kreative, ma\u00dfgeschneiderte Aufz\u00e4hlungszeichen-Designs<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Horizontale Listenlayouts<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Einzigartige Listengestaltung, die in realen Websites verwendet wird<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Designtrends<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Die Einbeziehung aktueller Webdesign-Trends kann Ihren Listen ein frisches, modernes Erscheinungsbild verleihen. Erw\u00e4gen Sie die Erforschung von:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Minimalismus:<\/b><span style=\"font-weight: 400;\"> Klare Linien, ausreichend Wei\u00dfraum und Listengestaltung f\u00fcr einen anspruchsvollen Look.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ausdrucksstarke Typografie:<\/b><span style=\"font-weight: 400;\"> Verwendung von kr\u00e4ftigen Schriftarten und kontrastierenden Gr\u00f6\u00dfen, um Ihre Listenpunkte hervorzuheben.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Mikrointeraktionen:<\/b><span style=\"font-weight: 400;\"> Hinzuf\u00fcgen von Animationen beim \u00dcberfahren oder Anklicken, um die Benutzerinteraktion mit Ihren Listen zu verbessern.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Farbe und visuelle Hinweise:<\/b><span style=\"font-weight: 400;\"> Nutzen Sie Farbpsychologie oder visuelle Trennelemente, um den Blick des Benutzers zu lenken und Listenelemente zu differenzieren.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Verwendung von Listen f\u00fcr visuelle Hierarchie<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Listen sind nicht nur f\u00fcr Aufz\u00e4hlungszeichen und Einkaufslisten geeignet! Sie k\u00f6nnen Ihre Inhalte effektiv strukturieren:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>\u00dcberschriften und Unter\u00fcberschriften:<\/b><span style=\"font-weight: 400;\"> Behandeln Sie \u00dcberschriften wie Listen, indem Sie verschiedene Ebenen (&lt;h1&gt;, &lt;h2&gt;, etc.) f\u00fcr eine klare Inhaltsorganisation verwenden.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Seitenleisten und Hervorhebungen:<\/b><span style=\"font-weight: 400;\"> Gestalten Sie Listen, um visuell unterscheidbare Inhaltsabschnitte zu erstellen, die Aufmerksamkeit erregen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Produktmerkmale:<\/b><span style=\"font-weight: 400;\"> Pr\u00e4sentieren Sie Produktvorteile oder Spezifikationen in einem strukturierten, leicht zu erfassenden Listenformat.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Elementor&#8217;s Theme Builder und Design Kits<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Elementor&#8217;s leistungsstarke Werkzeuge machen die Designerkundung zum Kinderspiel:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/theme-builder\/\"   title=\"Theme Builder\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"20430\">Theme Builder<\/a>:<\/b><span style=\"font-weight: 400;\"> Erm\u00f6glicht es Ihnen, jeden Aspekt Ihrer Website anzupassen, einschlie\u00dflich der Gestaltung von Listen auf Archivseiten, Blog-Beitr\u00e4gen und mehr.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Design Kits:<\/b><span style=\"font-weight: 400;\">  Erhalten Sie einen Vorsprung mit vorgestalteten Elementor-Vorlagen und Website-Kits. Viele beinhalten einzigartige Listengestaltungen, die Sie anpassen und zu Ihren eigenen machen k\u00f6nnen.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Verbesserung Ihrer WordPress-Website mit Elementor<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Vorteile von Elementor f\u00fcr WordPress<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Im Verlauf dieses Leitfadens haben wir gesehen, wie Elementor die Entfernung von Aufz\u00e4hlungszeichen vereinfacht und unz\u00e4hlige M\u00f6glichkeiten zur Listengestaltung er\u00f6ffnet. Doch seine Vorteile gehen weit \u00fcber die Gestaltung von Listen hinaus:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Benutzerfreundlichkeit:<\/b><span style=\"font-weight: 400;\"> Die Drag-and-Drop-Oberfl\u00e4che und die Live-Vorschau machen Webdesign f\u00fcr jeden zug\u00e4nglich, unabh\u00e4ngig von Programmierkenntnissen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Designtiefe:<\/b><span style=\"font-weight: 400;\"> Elementor bietet eine feink\u00f6rnige Kontrolle f\u00fcr diejenigen, die mit CSS vertraut sind, und erm\u00f6glicht so wirklich einzigartige und ma\u00dfgeschneiderte Website-Elemente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Geschwindigkeit und Leistung:<\/b><span style=\"font-weight: 400;\"> Der Code von Elementor ist f\u00fcr schnelles Laden optimiert, und in Kombination mit Elementor Hosting erzielen Sie eine un\u00fcbertroffene Leistung.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Florierende Gemeinschaft:<\/b><span style=\"font-weight: 400;\"> Zugriff auf eine umfangreiche Bibliothek von Tutorials, support-Foren und Drittanbieter-Erweiterungen f\u00fcr Elementor, die seine Funktionalit\u00e4t noch weiter ausbauen.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Fazit <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In diesem Leitfaden haben wir behandelt:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Die Grundlagen der CSS-Listengestaltung, die Kontrolle von Aufz\u00e4hlungszeichen (oder deren Fehlen!) und Vererbung.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Wie Elementor Sie in die Lage versetzt, das Design ohne Code-Kenntnisse anzupassen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Fortgeschrittene CSS-Techniken zum Ersetzen von Aufz\u00e4hlungszeichen durch benutzerdefinierte Bilder und zur Feinabstimmung des Abstands.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Die Bedeutung von Barrierefreiheit und Design-Best-Practices.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Die Leistungsvorteile von Elementor Hosting und seine integrierten Optimierungen.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Ob Sie Anf\u00e4nger oder erfahrener Webdesigner sind, Elementor erm\u00f6glicht es Ihnen, visuell ansprechende und gut strukturierte Listen zu erstellen, die Ihr Website-Erlebnis verbessern. In Kombination mit Elementor Hosting genie\u00dfen Sie blitzschnelle Ladezeiten, die die Benutzerzufriedenheit und die Sichtbarkeit in Suchmaschinen steigern.<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Aufz\u00e4hlungspunkte und nummerierte Listen \u2013 diese scheinbar simplen Elemente \u2013 spielen eine \u00fcberraschend wichtige Rolle im Webdesign. Sie strukturieren Informationen, lenken den Blick des Lesers und tragen zum gesamten visuellen Erscheinungsbild einer Website bei. Dennoch kann ihr Standardaussehen manchmal fade wirken oder nicht im Einklang mit Ihrer einzigartigen Markenidentit\u00e4t stehen.<\/p>\n","protected":false},"author":2024234,"featured_media":116825,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[513],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-123565","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressourcen"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wie entfernt man Aufz\u00e4hlungspunkte in CSS? (li &amp; ol) Ungeordnete Liste ohne Aufz\u00e4hlungspunkte<\/title>\n<meta name=\"description\" content=\"Aufz\u00e4hlungspunkte und nummerierte Listen \u2013 diese scheinbar simplen Elemente \u2013 spielen eine \u00fcberraschend wichtige Rolle im Webdesign. Sie strukturieren Informationen, lenken den Blick des Lesers und tragen zum gesamten visuellen Erscheinungsbild einer Website bei. Dennoch kann ihr Standardaussehen manchmal fade wirken oder nicht im Einklang mit Ihrer einzigartigen Markenidentit\u00e4t stehen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie entfernt man Aufz\u00e4hlungspunkte in CSS? (li &amp; ol) Ungeordnete Liste ohne Aufz\u00e4hlungspunkte\" \/>\n<meta property=\"og:description\" content=\"Aufz\u00e4hlungspunkte und nummerierte Listen \u2013 diese scheinbar simplen Elemente \u2013 spielen eine \u00fcberraschend wichtige Rolle im Webdesign. Sie strukturieren Informationen, lenken den Blick des Lesers und tragen zum gesamten visuellen Erscheinungsbild einer Website bei. Dennoch kann ihr Standardaussehen manchmal fade wirken oder nicht im Einklang mit Ihrer einzigartigen Markenidentit\u00e4t stehen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-03T06:22:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-09T17:35:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"13\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"Wie entfernt man Aufz\u00e4hlungspunkte in CSS? (li &amp; ol) Ungeordnete Liste ohne Aufz\u00e4hlungspunkte\",\"datePublished\":\"2025-03-03T06:22:30+00:00\",\"dateModified\":\"2026-01-09T17:35:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/\"},\"wordCount\":2495,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Ressourcen\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/\",\"url\":\"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/\",\"name\":\"Wie entfernt man Aufz\u00e4hlungspunkte in CSS? (li &amp; ol) Ungeordnete Liste ohne Aufz\u00e4hlungspunkte\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-03-03T06:22:30+00:00\",\"dateModified\":\"2026-01-09T17:35:31+00:00\",\"description\":\"Aufz\u00e4hlungspunkte und nummerierte Listen \u2013 diese scheinbar simplen Elemente \u2013 spielen eine \u00fcberraschend wichtige Rolle im Webdesign. Sie strukturieren Informationen, lenken den Blick des Lesers und tragen zum gesamten visuellen Erscheinungsbild einer Website bei. Dennoch kann ihr Standardaussehen manchmal fade wirken oder nicht im Einklang mit Ihrer einzigartigen Markenidentit\u00e4t stehen.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ressourcen\",\"item\":\"https:\/\/elementor.com\/blog\/de\/category\/ressourcen\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie entfernt man Aufz\u00e4hlungspunkte in CSS? (li &amp; ol) Ungeordnete Liste ohne Aufz\u00e4hlungspunkte\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/de\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/de\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wie entfernt man Aufz\u00e4hlungspunkte in CSS? (li &amp; ol) Ungeordnete Liste ohne Aufz\u00e4hlungspunkte","description":"Aufz\u00e4hlungspunkte und nummerierte Listen \u2013 diese scheinbar simplen Elemente \u2013 spielen eine \u00fcberraschend wichtige Rolle im Webdesign. Sie strukturieren Informationen, lenken den Blick des Lesers und tragen zum gesamten visuellen Erscheinungsbild einer Website bei. Dennoch kann ihr Standardaussehen manchmal fade wirken oder nicht im Einklang mit Ihrer einzigartigen Markenidentit\u00e4t stehen.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/","og_locale":"de_DE","og_type":"article","og_title":"Wie entfernt man Aufz\u00e4hlungspunkte in CSS? (li &amp; ol) Ungeordnete Liste ohne Aufz\u00e4hlungspunkte","og_description":"Aufz\u00e4hlungspunkte und nummerierte Listen \u2013 diese scheinbar simplen Elemente \u2013 spielen eine \u00fcberraschend wichtige Rolle im Webdesign. Sie strukturieren Informationen, lenken den Blick des Lesers und tragen zum gesamten visuellen Erscheinungsbild einer Website bei. Dennoch kann ihr Standardaussehen manchmal fade wirken oder nicht im Einklang mit Ihrer einzigartigen Markenidentit\u00e4t stehen.","og_url":"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-03T06:22:30+00:00","article_modified_time":"2026-01-09T17:35:31+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Verfasst von":"Itamar Haim","Gesch\u00e4tzte Lesezeit":"13\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Wie entfernt man Aufz\u00e4hlungspunkte in CSS? (li &amp; ol) Ungeordnete Liste ohne Aufz\u00e4hlungspunkte","datePublished":"2025-03-03T06:22:30+00:00","dateModified":"2026-01-09T17:35:31+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/"},"wordCount":2495,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/de\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Ressourcen"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/","url":"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/","name":"Wie entfernt man Aufz\u00e4hlungspunkte in CSS? (li &amp; ol) Ungeordnete Liste ohne Aufz\u00e4hlungspunkte","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-03-03T06:22:30+00:00","dateModified":"2026-01-09T17:35:31+00:00","description":"Aufz\u00e4hlungspunkte und nummerierte Listen \u2013 diese scheinbar simplen Elemente \u2013 spielen eine \u00fcberraschend wichtige Rolle im Webdesign. Sie strukturieren Informationen, lenken den Blick des Lesers und tragen zum gesamten visuellen Erscheinungsbild einer Website bei. Dennoch kann ihr Standardaussehen manchmal fade wirken oder nicht im Einklang mit Ihrer einzigartigen Markenidentit\u00e4t stehen.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/de\/wie-entfernt-man-aufzaehlungspunkte-in-css-li-ol-ungeordnete-liste-ohne-aufzaehlungspunkte\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/de\/"},{"@type":"ListItem","position":2,"name":"Ressourcen","item":"https:\/\/elementor.com\/blog\/de\/category\/ressourcen\/"},{"@type":"ListItem","position":3,"name":"Wie entfernt man Aufz\u00e4hlungspunkte in CSS? (li &amp; ol) Ungeordnete Liste ohne Aufz\u00e4hlungspunkte"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/de\/#website","url":"https:\/\/elementor.com\/blog\/de\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/de\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/de\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/123565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/comments?post=123565"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/123565\/revisions"}],"predecessor-version":[{"id":150133,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/123565\/revisions\/150133"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/media\/116825"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/media?parent=123565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/categories?post=123565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/tags?post=123565"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/marketing_persona?post=123565"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/marketing_intent?post=123565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}