資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究CSS 中列表標記位置的更改
CSS 的list-style-position 屬性用於設定列表項的標記位置。此屬性的預設值為outside，它將標記設定在列表項外部。它具有以下值 -
inside - 列表項內的專案符號
outside - 預設值。列表項外的專案符號
語法
CSS list-style-position 屬性的語法如下所示 -
Selector {
list-style-position: /*value*/
}
以下示例說明了 CSS list-style-property -
將列表標記放置在列表項外部
我們使用list-style-position 屬性和值outside 將列表標記放置在列表項外部 -
list-style-position: outside;
示例
讓我們看看將列表標記放置在列表項外部的示例 -
<!DOCTYPE html>
<html>
<head>
<style>
li {
width: 50%;
margin: 5px;
font-size: 120%;
box-shadow: 0 0 3px 1px black;
background: url("https://tutorialspoint.tw/dbms/images/dbms.jpg") no-repeat 32px 8px;
list-style-position: outside;
padding: 0 0 10px 20px;
}
</style>
</head>
<body>
<h1>Colors</h1>
<ol>
<li>Black</li>
<li>Blue</li>
<li>Yellow</li>
<li>Red</li>
</ol>
</body>
</html>
將列表標記放置在列表項內部
我們使用list-style-position 屬性和值inside 將列表標記放置在列表項內部 -
list-style-position: inside;
示例
讓我們看看將列表標記放置在列表項內部的示例 -
<!DOCTYPE html>
<html>
<head>
<style>
li {
width: 50%;
margin: 5px;
font-size: 120%;
box-shadow: 0 0 3px 1px black;
list-style-position: inside;
padding: 0 0 10px 20px;
}
</style>
</head>
<body>
<h1>Colors</h1>
<ol>
<li>Black</li>
<li>Blue</li>
<li>Yellow</li>
<li>Red</li>
</ol>
</body>
</html>
使用相鄰兄弟選擇器定位列表標記
在此示例中，我們使用相鄰兄弟選擇器定位了緊鄰其後的列表內部。CSS 相鄰兄弟選擇器用於選擇元素的相鄰兄弟元素。它用於僅選擇緊隨第一個選擇器之後的那些元素。+ 符號用作分隔符。例如，此處使用相鄰兄弟選擇器概念選擇了直接的下一個元素 -
ul + ul {
list-style-type: circle;
list-style-position: inside;
}
示例
讓我們看看使用相鄰兄弟選擇器定位列表標記的示例 -
<!DOCTYPE html>
<html>
<head>
<style>
ul {
width: 200px;
box-shadow: inset 0 0 6px green;
list-style-position: outside;
}
ul + ul {
list-style-type: circle;
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
</body>
</html>
更新於: 2023-10-30
5K+ 次檢視
廣告