Wenn es darum geht, ungeordnete Listen mit CSS zu gestalten, ist Einrückung eine häufige Funktion, die verwendet wird, um Listenelementen eine visuelle Hierarchie zu verleihen. In manchen Fällen möchten Sie jedoch möglicherweise die Einrückung von bestimmten Listenelementen oder der gesamten Liste entfernen.
Eine ungeordnete Liste, auch Aufzählungsliste genannt, ist eine HTML-Liste, die Informationen als Liste von Elementen anzeigt, denen jeweils ein Aufzählungszeichen oder ein Symbol vorangestellt ist. Die Elemente in einer Liste sind nicht nummeriert oder in einer bestimmten Reihenfolge angeordnet. Der Zweck einer ungeordneten Liste besteht darin, zusammengehörige Inhalte visuell in einzelne Elemente zu unterteilen und zu organisieren.
In diesem Artikel erfahren Sie, wie Sie Einrückungen aus ungeordneten Listenelementen entfernen und wie Sie diese Aufgabe in CSS auf unterschiedliche Weise ausführen können.
Verschiedene Möglichkeiten, Einrückungen aus ungeordneten Listenelementen zu entfernen?
Es gibt mehrere Möglichkeiten, Einrückungen aus ungeordneten Listenelementen in CSS zu entfernen. Lassen Sie uns jeden einzelnen davon im Detail besprechen, zusammen mit seiner Syntax und Beispielen.
Methode 1: Texteinrückungsattribut verwenden
Bei dieser Methode verwenden wir die Eigenschaft text-indent, um den Einzug der ungeordneten Listenelemente zu entfernen. Das text-indent-Attribut wird verwendet, um den Einrückungsbetrag der ersten Textzeile innerhalb des Elements anzugeben. Um die Einrückung zu entfernen, können wir den text-indent-Wert des Listenelements auf 0 setzen.
Grammatik
Hier ist die Syntax zum Entfernen von Einzügen aus ungeordneten Listenelementen mithilfe der Eigenschaft text-indent.
ul li {
text-indent: 0;
}
Nach dem Login kopieren
Beispiel
Im gegebenen Beispiel verwenden wir die Eigenschaft text-indent, um Einrückungen aus einer ungeordneten Liste einer Programmiersprache zu entfernen.
<html>
<head>
<title>Example to remove indentation from unordered list item using the text-indent property</title>
<style>
ul li {
text-indent: 0;
}
</style>
</head>
<body>
<h2 style="color: green;">List of most used programming languages</h2>
<ul>
<li>Java</li>
<li>Python</li>
<li>C++</li>
<li>JavaScript</li>
<li>Swift</li>
<li>PHP</li>
<li>Ruby</li>
<li>SQL</li>
<li>Kotlin</li>
<li>Scala</li>
<li>Perl</li>
<li>Objective C</li>
</ul>
</body>
</html>
Nach dem Login kopieren
Methode 2: Füllattribut verwenden
Bei dieser Methode verwenden wir die padding-Eigenschaft, um die Einrückung der ungeordneten Listenelemente zu entfernen. Die padding-Eigenschaft legt den Abstand zwischen dem Inhalt eines Elements und seinem Rand fest. Um Einrückungen zu entfernen, können wir den padding-left-Wert des Listenelements auf 0 setzen.
Grammatik
Hier ist die Syntax zum Entfernen von Einrückungen aus einem ungeordneten Listenelement mithilfe des padding-Attributs.
ul li {
padding-left: 0;
}
Nach dem Login kopieren
Beispiel
Im gegebenen Beispiel verwenden wir die Eigenschaft padding, um Einrückungen aus einer ungeordneten Liste in einer Programmiersprache zu entfernen.
<html>
<head>
<title>Example to remove indentation from unordered list item using the padding-left property</title>
<style>
ul li {
padding-left: 0;
}
</style>
</head>
<body>
<h2 style="color: green;">List of most used programming languages</h2>
<ul>
<li>Java</li>
<li>Python</li>
<li>C++</li>
<li>JavaScript</li>
<li>Swift</li>
<li>PHP</li>
<li>Ruby</li>
<li>SQL</li>
<li>Kotlin</li>
</ul>
</body>
</html>
Nach dem Login kopieren
Methode 3: Margin-Attribut verwenden
Bei dieser Methode verwenden wir die Eigenschaft „margin“, um die Einrückung der ungeordneten Listenelemente zu entfernen. Mit der Eigenschaft „margin“ wird der Abstand zwischen einem Element und seinen angrenzenden Elementen festgelegt. Um die Einrückung zu entfernen, können wir den margin-left-Wert des Listenelements auf 0 setzen.
Grammatik
Hier ist die Syntax zum Entfernen von Einrückungen aus ungeordneten Listenelementen mithilfe der Margin-Eigenschaft.
ul li {
margin-left: 0;
}
Nach dem Login kopieren
Beispiel
Im gegebenen Beispiel verwenden wir die Eigenschaft margin-left, um Einrückungen aus ungeordneten Listen in der Programmiersprache zu entfernen.
<html>
<head>
<title>Example to remove indentation from unordered list item using the margin-left property</title>
<style>
ul li {
margin-left: 0;
}
</style>
</head>
<body>
<h2 style="color: green;">List of most used programming languages</h2>
<ul>
<li>Java</li>
<li>Python</li>
<li>C++</li>
<li>JavaScript</li>
<li>Swift</li>
<li>PHP</li>
<li>Ruby</li>
</ul>
</body>
</html>
Nach dem Login kopieren
Methode 4: Verwendung von Positionsattributen im Listenstil
Bei dieser Methode verwenden wir die Positionseigenschaft des Listenstils, um die Einrückung der ungeordneten Listenelemente zu entfernen. Standardmäßig befindet sich das Markup außerhalb des Inhaltsbereichs des Listenelements, was zu einer Einrückung führt. Sie können jedoch den Wert „list-style-position“ auf „inside“ setzen, um das Markup in den Inhaltsbereich zu verschieben und den Einzug zu entfernen.
Grammatik
Unten finden Sie die Syntax zum Entfernen von Einrückungen aus ungeordneten Listenelementen mithilfe des Positionsattributs im Listenstil.
ul li {
list-style-position: inside;
}
Nach dem Login kopieren
Beispiel
Im gegebenen Beispiel verwenden wir das Positionsattribut des Listenstils, um Einrückungen aus ungeordneten Listen in der Programmiersprache zu entfernen. Die Eigenschaft list-style-position gibt die Position der Listenelementmarkierung (Aufzählungspunkt) an. Hier setzen wir list-style-position auf inside, was bedeutet, dass sich der Aufzählungspunkt innerhalb des Listenelements befindet. Da es Teil des Listenelements ist, wird es Teil des Textes und verschiebt den Text an den Anfang.
<html>
<head>
<title>Example to remove indentation from unordered list item using the list-style-position property</title>
<style>
ul li {
list-style-position: inside;
}
</style>
</head>
<body>
<h2 style="color: green;">List of most used programming languages</h2>
<ul>
<li>Java</li>
<li>Python</li>
<li>C++</li>
<li>JavaScript</li>
<li>Swift</li>
<li>PHP</li>
<li>Ruby</li>
<li>SQL</li>
</ul>
</body>
</html>
Nach dem Login kopieren
Fazit
Einrückung ist eine gängige Funktion, die mithilfe von CSS eine visuelle Hierarchie in ungeordneten Listen bereitstellt. In einigen Fällen müssen wir jedoch möglicherweise Einrückungen von bestimmten Elementen oder der gesamten Liste entfernen. In diesem Artikel haben wir besprochen, wie man Einrückungen entfernt, und haben verschiedene Möglichkeiten kennengelernt, Einrückungen aus ungeordneten Listenelementen mithilfe von CSS zu entfernen, einschließlich Texteinrückung, Auffüllung, Ränder und Listenstil-Positionseigenschaften. Diese Methoden können entsprechend den spezifischen Anforderungen und Designanforderungen der Webseite angewendet werden. Durch das Verständnis dieser Methoden können Entwickler den Stil von Webseiten besser steuern und optisch ansprechendere Designs erstellen.
Das obige ist der detaillierte Inhalt vonWie entferne ich Einrückungen aus ungeordneten Listenelementen mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
