HTML 中的中心项目符号点
项目符号列表用于在 HTML 中创建相关项目列表,并可用于创建大纲和菜单或相关项目列表。 每个列表项都以 <li>
标记开头。
列表项保存在 <ul>
(无序/项目符号列表)或 <ol>
(有序/编号列表)标签中。 本文将教我们不同的项目符号样式以及如何在 HTML 中使项目符号居中。
项目符号点的 HTML 样式
在 HTML 中,可以使用 <ul>
(无序列表)标记创建项目符号点,并为其设置样式,我们使用 list-style-type 属性。 list-style-type 属性指定列表标记的类型,可以有以下值。
- disc - 实心圆(默认)
- circle - 空心圆
- square - 一个填充的正方形
- none - 无标记(用于创建嵌套列表)
Disc - 实心圆(默认)
要创建项目符号列表,请创建一个 <ul>
元素,并将 list-style-type 属性设置为所需的值。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
circle - 空心圆
我们可以通过以下代码创建空心圆项目符号点。
代码:
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type: circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Square – 一个填充的正方形
我们可以通过以下代码创建方形项目符号点。
<p>The list of developed countries :</p>
<ul style="list-style-type: square;">
<li>US</li>
<li>Australia</li>
<li>New Zealand</li>
</ul>
None - 无标记
无项目符号点列表有以下代码。
<ul style="list-style-type: none;">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
HTML 中的中心项目符号点
代码示例:
<!DOCTYPE html>
<head>
<style>
.parent {
text-align: center;
}
.parent > ul {
display: inline-block;
}
</style>
</head>
<body>
<h1>Center Bullet Points in HTML</h1>
<div class="parent">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<br>
<ul style="list-style-type: circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<br>
<ul style="list-style-type: square;">
<li>US</li>
<li>Australia</li>
<li>New Zealand</li>
</ul>
</div>
</body>
总结
使用 CSS 和 JavaScript,项目符号以 HTML 为中心。 可以使用标签在 HTML 中制作要点列表。
HTML 提供了几种不同的方法来创建项目符号点,最典型的方法是使用无序列表元素。 该元素将为每个列表项创建一个项目符号点,我们还可以使用有序列表元素创建带编号的项目符号点。
相关文章
HTML 中的 role 属性
发布时间:2023/05/06 浏览次数:124 分类:HTML
-
本篇文章介绍 HTML role属性。HTML中 role 属性介绍,role 属性定义描述语义的 HTML 元素的角色。
在 HTML 中打印时分页
发布时间:2023/05/06 浏览次数:188 分类:HTML
-
本篇文章介绍如何在打印 HTML 页面或内容时强制分页。将 page-break-after 属性设置为 always Inside @media print to Page Break in HTML
在 HTML 中显示基于 Cookie 的图像
发布时间:2023/05/06 浏览次数:154 分类:HTML
-
本文介绍如何根据 HTML 中的 cookies 显示图像。根据 HTML 中设置的 Cookies 显示图像。问题陈述是我们需要根据网页传递的cookie来显示特定的图像。
在 HTML 中创建下载链接
发布时间:2023/05/06 浏览次数:140 分类:HTML
-
本文介绍如何在 HTML 中创建下载链接。使用 download 属性在 HTML 中创建下载链接.。我们可以使用 HTML 锚元素内的下载属性来创建下载链接。
HTML 中的 ::before 选择器
发布时间:2023/05/06 浏览次数:70 分类:HTML
-
本教程介绍 CSS ::before 伪元素。CSS ::before 伪元素。 ::before 选择器是一个 CSS 伪元素,我们可以使用它在一个或多个选定元素之前插入内容。 它默认是内联的。
在 HTML 中创建一个可滚动的 Div
发布时间:2023/05/06 浏览次数:54 分类:HTML
-
本篇文章介绍如何使 HTML div 可滚动。本文将介绍在 HTML 中使 div 可滚动的方法。 我们将探索垂直和水平滚动,并通过示例查看它们的实现。
HTML 显示箭头的代码
发布时间:2023/05/06 浏览次数:153 分类:HTML
-
一篇关于用于显示箭头的 Unicode 字符实体的紧凑文章。本文讨论使用 Unicode 字符实体在我们的 HTML 页面上显示不同的字符。 HTML 中使用了许多实体,但我们将重点学习表示上、下、左、右的三角
在 HTML 中启用和禁用复选框
发布时间:2023/05/06 浏览次数:149 分类:HTML
-
本篇文章介绍如何启用和禁用 HTML 中的复选框。HTML 中的复选框 复选框是一个交互式框,可以切换以表示肯定或否定。 它广泛用于表单和对话框。
HTML 中的只读复选框
发布时间:2023/05/06 浏览次数:198 分类:HTML
-
本篇文章介绍了如何在 HTML 中制作只读复选框。本文是关于如何使 HTML 复选框控件成为只读组件的快速破解。 但是,首先,让我们简要介绍一下复选框控件。