CSS如何设置列表样式属性(看这篇文章就够用了)

2020-05-16 06:59:51易采站长站整理
属性值为
outside
实践了,实践内容:将
HTML
页面中的列表前面的项目符号设置为外面。

代码块


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>属性值为outside使用方式</title>
<style>
ul {
width: 300px;
height: 150px;
border: 1px solid #00F;
}
ul li {

width: 280px;
height: 30px;
line-height: 30px;
border: 1px solid red;
list-style-position: outside;
}

</style>
</head>

<body>
<ul>
<li>成功不是打败别人,而是改变自己。</li>
<li>成功不是打败别人,而是改变自己。</li>
<li>成功不是打败别人,而是改变自己。</li>
</ul>

</body>
</html>

结果图

注意:为什么给列表设置了

list-style-position
属性值为
outside
,运行结果没有发生任何变化呢,因为列表前面的项目符号默认就在外面的位置,列表前面的项目符号外面的位置就是
ul
标签和
li
标签之间的位置。

属性值为inside使用方式

 通过介绍

list-style-position
属性值为
outside
,大家已经知道了列表前面项目符号外边的位置了,接下来我们将列表前面项目符号设置在里面咯。
让我们进入
list-style-position
属性值为
inside
实践,将列表前面项目符号位置设置在里面。

代码块


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>属性值为inside使用方式</title>
<style>
ul {
width: 300px;
height: 150px;
border: 1px solid #00F;
}
ul li {

width: 280px;
height: 30px;
line-height: 30px;
border: 1px solid red;
list-style-position: inside;