数据结构
网络
关系数据库管理系统
操作系统
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.com/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+ 次查看
广告