HTML - 无序列表_HTML 菜鸟教程

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>

<< HTML - 列表 HTML - 有序列表 >>