資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何控制專案符號和<li>元素之間的間距？
列表是一個包含簡短相關資訊的集合，可用於在網頁上以有序或無序格式顯示資料或資訊。HTML 列表用於指定資訊列表。所有列表都可以包含一個或多個列表元素。HTML 列表共有三種。
有序列表 (ol): 此列表使用數字方案列出專案。
無序列表 (ul): 此列表使用普通專案符號列出專案。
定義列表 (dl): 此列表以字典格式排列專案。
我們可以透過在 HTML 中建立無序列表來建立 HTML 專案符號。HTML 中的無序列表，也稱為 HTML 專案符號列表，是 HTML 列表的一種常見型別。與有序列表不同，您在 HTML 中使用專案符號列表來列出不需要按順序排列的專案。
在無序列表中建立 HTML 專案符號
要在無序列表中建立 HTML 專案符號，我們必須使用兩個不同的標籤。首先，我們必須將文字用<ul>...</ul>標籤括起來以建立專案符號列表。其次，我們必須用<li>...</li>標籤將列表中的每一項括起來。在建立 HTML 專案符號時，我們有三種格式選項可供選擇。
我們可以選擇建立圓圈、正方形或圓點。圓點是預設選項。STYLE 屬性用於指定專案符號的樣式。然後，我們必須將其值設定為“list-style-type:format”，其中 format 是圓圈、正方形或圓點的文字。我們必須在<ul>開始標籤中包含‘style’屬性。
考慮一下這個專案符號和文字之間具有預設間距的簡單無序列表。
示例
<!DOCTYPE html>
<html>
<head>
<title>How to Control the Space Between Bullets and <li> Elements </title>
</head>
<body>
<h3>Seven Wonders of the World</h3>
<ul>
<li>The Great Wall of China</li>
<li>Chichen Itza</li>
<li>Christ the Redeemer</li>
<li>Matchu Picchu</li>
<li>Petra</li>
<li>Taj Mahal</li>
<li>Colosseum</li>
</ul>
</body>
</html>
在這篇文章中，我們將討論一些可以幫助控制專案符號和列表元素之間間距的方法。
使用 Span 元素
<span> 標籤是一個內聯容器，用於標記文字部分或文件部分。使用 class 或 id 屬性，<span> 標籤可以輕鬆地使用 CSS 進行樣式設定或使用 JavaScript 進行操作。它類似於<div>標籤，但<div>是塊級元素，而<span>是內聯元素。以下是語法
<span class="">Some Text</span>
示例
下面的示例顯示瞭如何透過將列表文字插入 span 標籤來更改專案符號和列表元素之間的間距。
<!DOCTYPE html>
<html>
<head>
<title>How to Control the Space Between Bullets and <li> Elements</title>
<style>
body{
background-color:lightyellow;
margin-left:200px;
margin-top:100px;
}
li {
color: slategrey;
}
span {
position: relative;
left: -10px;
}
</style>
</head>
<body>
<h3>Seven Wonders of the World</h3>
<ul>
<li>
<span> The Great Wall of China</span>
</li>
<li>
<span>Chichen Itza</span>
</li>
<li>
<span>Christ the Redeemer</span>
</li>
<li>
<span>Matchu Picchu</span>
</li>
<li>
<span>Petra</span>
</li>
<li>
<span>Taj Mahal</span>
</li>
<li>
<span>Colosseum</span>
</li>
</ul>
</body>
</html>
使用 Padding-left 屬性
填充 (Padding) 是元素內容與其邊框之間的空間。它在元素內建立額外的空間，而邊距 (margin) 在元素周圍建立額外的空間。padding-left 屬性指定元素的左邊距 (空間)。
語法
以下是語法
padding-left: length|percentage|initial|inherit;
示例
在這個示例中，我們將看到如何調整列表元素的填充，從而控制專案符號和文字之間的間距。專案符號會根據文字大小進行縮放。
<!DOCTYPE html>
<html>
<head>
<title>How to Control the Space Between Bullets and <li> Elements</title>
<style>
body{
background-color:lavender;
margin-left:200px;
margin-top:100px;
}
div ul li {
padding-left: 40px;
color:darkblue;
background-color:lightcyan;
}
div p{
font-size:20px;
font-weight:600;
background-color:white;
width:300px;
text-align:center;
}
div ul{
padding-left:70px;
background-color:azure;
width:230px;
}
</style>
</head>
<body>
<div>
<p>Factors of Good Health</p>
</div>
<div>
<ul>
<div>
<li>The Great Wall of China</li>
<li>Chichen Itza</li>
<li>Christ the Redeemer</li>
<li>Matchu Picchu</li>
<li>Petra</li>
<li>Taj Mahal</li>
<li>Colosseum</li>
</div>
</ul>
</div>
</body>
</html>
在這種方法中，我們必須記住專案符號和文字必須是相同的顏色。此外，我們無法將專案符號移動到比瀏覽器預設值更靠近文字的位置，並且我們無法控制專案符號的垂直位置。
1K+ 瀏覽量
