HTML列表可以使用CSS应用许多不同的样式。以下是一些常用的。
列表样式类型
确定项目符号的外观。有关可能值的信息，请参阅列表样式类型页面。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/269.html
<!DOCTYPE html>
<title>Example</title>
<style>
ul {
font-size: 1.5em;
list-style-type: circle;
}
</style>
<ul>
<li>列表项一</li>
<li>清单项目二</li>
<li>清单项目三</li>
</ul>列表样式图像
有关将图像用于项目符号点的详细信息，请参阅列表样式图像。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/269.html
<!DOCTYPE html>
<title>Example</title>
<style>
ul {
font-size: 22px;
list-style-image: url("/pix/samples/bullet1.png");
}
</style>
<ul>
<li>列表项一</li>
<li>清单项目二</li>
<li>清单项目三</li>
</ul>列表样式位置
确定项目符号是位于列表的包含框内还是位于列表的包含框外部。有关详细信息，请参阅列表样式位置。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/269.html
<!DOCTYPE html>
<title>Example</title>
<style>
ul {
font-size: 1.5em;
}
.inside {
list-style-position: inside;
}
.outside {
list-style-position: outside;
}
</style>
<ul class="inside">
<li>列表项一</li>
<li>清单项目二</li>
<li>清单项目三</li>
</ul>
<ul class="outside">
<li>列表项一</li>
<li>清单项目二</li>
<li>清单项目三</li>
</ul>列表样式
列表样式属性是设置列表属性的简写。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/269.html
<!DOCTYPE html>
<title>Example</title>
<style>
ul {
font-size: 1.5em;
list-style: square inside;
}
</style>
<ul>
<li>列表项一</li>
<li>清单项目二</li>
<li>清单项目三</li>
</ul>无样式列表
默认情况下，大多数浏览器都以某种方式设置列表样式。例如，大多数列表的每个项目都有一个项目符号点或其他列表标记。列表通常还应用了填充和边距。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/269.html
但是，您可能并不总是希望列表以这种方式显示。实际上，开发人员使用无样式列表是很常见的。无样式列表是指已删除任何填充、边距和列表标记的列表。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/269.html
无样式列表通常用于网站导航，以及任何列表标记，填充和边距都会妨碍的其他位置。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/269.html
下面是无样式列表的示例：文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/269.html
<!DOCTYPE html>
<title>Example</title>
<style>
ul {
font-size: 22px;
margin: 0;
padding-left: 0;
list-style: none;
}
</style>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Watermelons</li>
</ul>内联列表
您可以更进一步，将无样式列表转换为内联列表。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/269.html
您可以通过针对li元素进行设置来执行此操作。display: inline-block;文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/269.html
<!DOCTYPE html>
<title>Example</title>
<style>
ul {
font-size: 22px;
margin: 0;
padding-left: 0;
list-style: none;
}
ul > li {
display: inline-block;
}
</style>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Watermelons</li>
</ul>文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/269.html 文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/269.html
评论