當涉及使用 CSS 設計無序列表樣式時，縮排是一個常見功能，用於為清單項目提供視覺層次結構。但是，在某些情況下，您可能想要從特定清單項目或整個清單中刪除縮排。
無序列表，也稱為項目符號列表，是一種 HTML 列表，它將資訊顯示為項目列表，每個項目前面都有一個項目符號或符號。清單中的項目不按任何特定順序進行編號或排序，無序列表的目的是在視覺上將相關內容分開並組織成離散的項目。
在本文中，我們將學習如何從無序列表項中刪除縮進，並了解在 CSS 中執行此任務的不同方法。
從無序列表項中刪除縮排的不同方法？
有多種方法可以從 CSS 中的無序列表項中刪除縮排。讓我們詳細討論它們中的每一個及其語法和示例。
方法一：使用text-indent屬性
在此方法中，我們將使用 text-indent 屬性來刪除無序列表項的縮排。 text-indent 屬性用來指定元素內第一行文字的縮排量。要刪除縮排，我們可以將清單項目的 text-indent 值設為 0。
文法
以下是使用 text-indent 屬性從無序列表項中刪除縮排的語法。
ul li {
text-indent: 0;
}
登入後複製
範例
在給定的範例中，我們使用 text-indent 屬性從程式語言的無序列表中刪除縮排。
<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>
登入後複製
方法2：使用padding屬性
在此方法中，我們將使用 padding 屬性來刪除無序列表項的縮排。 padding 屬性用於設定元素內容與其邊框之間的空間量。若要刪除縮排，我們可以將清單項目的 padding-left 值設為 0。
文法
以下是使用 padding 屬性從無序列表項中刪除縮排的語法。
ul li {
padding-left: 0;
}
登入後複製
範例
在給定的範例中，我們使用 padding 屬性從程式語言的無序列表中刪除縮排。
<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>
登入後複製
方法三：使用margin屬性
在此方法中，我們將使用 margin 屬性來刪除無序列表項的縮排。 margin 屬性用於設定元素與其相鄰元素之間的空間量。要刪除縮排，我們可以將清單項目的 margin-left 值設為 0。
文法
以下是使用 margin 屬性從無序列表項中刪除縮排的語法。
ul li {
margin-left: 0;
}
登入後複製
範例
在給定的範例中，我們使用 margin-left 屬性從程式語言的無序列表中刪除縮排。
<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>
登入後複製
方法4：使用列表樣式的位置屬性
在此方法中，我們將使用清單樣式的位置屬性來刪除無序列表項的縮排。預設情況下，標記位於清單項目的內容區域之外，這會導致縮排。但是，您可以將 list-style-position 值設為 inside，以將標記移至內容區域內並刪除縮排。
文法
下面是使用清單樣式位置屬性從無序列表項中刪除縮排的語法。
ul li {
list-style-position: inside;
}
登入後複製
範例
在給定的範例中，我們使用清單樣式的位置屬性來從程式語言的無序列表中刪除縮排。 list-style-position 屬性指定清單項目標記（項目符號點）的位置。這裡我們將 list-style-position 設定為 inside，這表示項目符號點將位於清單項目內部。由於它是清單項目的一部分，因此它將成為文字的一部分並將文字推到開頭。
<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>
登入後複製
結論
縮排是一項常用功能，可使用 CSS 在無序列表中提供視覺層次結構。但是，在某些情況下，我們可能需要從特定項目或整個清單中刪除縮排。在本文中，我們討論瞭如何刪除縮進，並學習了使用 CSS 從無序列表項中刪除縮排的不同方法，包括文字縮排、填充、邊距和列表樣式位置屬性。這些方法可以根據網頁的具體要求和設計需求來應用。透過了解這些方法，開發人員可以更好地控制網頁的樣式並創建更具視覺吸引力的設計。
以上是如何使用 CSS 從無序列表項中刪除縮排？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
