如何用 CSS 去除无序列表项的缩进?
在设计网页时,我们习惯于添加一些项目列表,有时它们是有编号的(各种样式),有时它们是有项目符号的(各种样式)。这可能发生在我们试图设计一个导航栏或任何种类的列表,其中的项目既没有编号也没有项目符号,我们不需要数字或项目符号,也没有空白。要从无序列表(包含项目符号的列表)中移除缩进,需要使用 CSS 进行样式化。样式将只在列表中实现。所以选择器应该是 ul 的。
语法:
ul {
// CSS Property
}
示例:本示例创建一个列表缩进为零(0)的页面。
<!DOCTYPE html>
<html>
<head>
<title>
Remove indentation from an
unordered list of items
</title>
<!-- CSS style to remove indentation
from list of items -->
<style>
ul {
list-style:none;
padding-left:0;
}
</style>
</head>
<body>
<h3>Computer science subjects:</h3>
<ul>
<li>Data Structure</li>
<li>Algorithms</li>
<li>Operating System</li>
<li>Computer Network</li>
<li>DBMS</li>
<li>Web Technology</li>
</ul>
</body>
</html>
输出:
在上例中,左填充属性用于设置从左缩进。左填充:0 用于删除左边的缩进(空格)。list-style: none 属性用于从项目列表中移除 list-style 属性。
版权属于:月萌API www.moonapi.com,转载请注明出处