HTML 无序列表用于显示没有特定顺序或顺序的相关项的集合。我们可以在 HTML 中使用嵌套有 <ul> 元素的 <li> 元素进行无序。
下图显示了无序列的杂货列表：
无序列表 - 选择列表项标记
<ul> 标签的 type 属性用于指定 HTML 中无序列表的项目符号类型。默认情况下，使用光盘项目符号类型。但是，我们可以借助以下选项来更改它。
| 属性值 | 描述 |
|---|---|
| disc | 它是标记的默认类型。 |
| square | 列表项将用方形标记显示。 |
| circle | 它会将标记设置为空心圆圈。 |
无序列表示例
下面的示例将说明 HTML 无序列表，以及我们应该在哪里以及如何使用 HTML 的这个属性。
创建无序列表
下面的示例演示如何在 HTML 中创建无序列表。以下示例显示包含默认光盘项目符号的无序列表。
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
嵌套无序列表
在下面的示例中，我们将通过在列表中定义列表来创建嵌套的无序列表。
<!DOCTYPE html>
<html>
<head>
<title>HTML Nested Unordered List</title>
</head>
<body>
<ul>
<li>qikepu.com</li>
<li> Web Development
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Javascript</li>
</ul>
</body>
</html>
更改无序列表的标记类型
下面的示例说明了 HTML 中不同类型的无序列表。
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<p>
An unordered list with hollow circle marker:
</p>
<ul type="circle">
<li>Rice</li>
<li>Pulses</li>
<li>Flour</li>
<li>Beans</li>
</ul>
<p>
An unordered list with square marker:
</p>
<ul type="square">
<li>Nuts</li>
<li>Oats</li>
<li>Eggs</li>
<li>Dates</li>
</ul>
<p>
An unordered list with default disc marker:
</p>
<ul type="disc">
<li>Apple</li>
<li>Guava</li>
<li>Carrot</li>
<li>Orange</li>
</ul>
</body>
</html>
无项目符号的无序列表
通过设置 ul 标签的属性，您可以创建不带项目符号标记的无序列表。以下代码演示了此过程。style="list-style-type: none"
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul style="list-style-type: none">
<li>Abdul</li>
<li>Jason</li>
<li>Yadav</li>
</ul>
</body>
</html>
水平无序列表
在此示例中，我们将创建一个无序列表，并使用 CSS 属性使该列表水平。
<!DOCTYPE html>
<html>
<head>
<title>HTML Horizontal Unordered List</title>
<style>
ul {
overflow: hidden;
background-color: gray;
list-style-type: none;
}
li {
float: left;
text-decoration: none;
color: white;
padding: 0.5rem;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
</ul>
</body>
</html>
设置无序列表样式
使用 CSS 设置无序列表 （HTML <ul>） 的样式允许自定义列表的外观，包括修改项目符号、间距和整体设计。下面是示例程序。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styled Unordered List</title>
<style>
ul {
list-style-type: square;
/* Custom bullet type */
padding: 0;
/* Removes default padding */
}
li {
margin-bottom: 8px;
/* Adds spacing between list items */
background-color: #f0f0f0;
/* Background color */
border: 1px solid #ccc;
/* Border */
padding: 8px;
/* Padding inside each list item */
transition: background-color 0.3s;
/* Smooth transition effect */
}
li:hover {
background-color: #e0e0e0;
/* Change background on hover */
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
