Html 简明教程

HTML - Unordered Lists

HTML Unordered List 用于显示一组相关的项，这些项没有特定的顺序或序列。我们可以嵌套使用 <ul> 元素在 HTML 中创建无序列表。

下图显示了无序的杂货列表：

Unordered HTML List - Choose List Item Marker

type attribute 用于 <ul> 标记以指定 HTML 中无序列表的项目符号类型。默认情况下，使用圆盘项目符号类型。但是，我们可以使用以下选项更改此设置。

Attribute Value

Description

disc

这是标记的默认类型。

square

项目符号将使用方框标记显示。

circle

它将把标记设置为一个空心圆圈。

Examples of Unordered List

以下示例将说明 HTML 无序列表，以及我们在何处以及如何使用 HTML 的此属性。

Create a Unordered List

以下示例演示如何在 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>

Nested Unordered List

在以下示例中，我们将通过在列表中定义列表来创建嵌套无序列表。

<!DOCTYPE html>
<html>

<head>
   <title>HTML Nested Unordered List</title>
</head>

<body>
<ul>
   <li>Tutorialspoint</li>
   <li> Web Development
       <ul>
           <li>HTML</li>
           <li>CSS</li>
       </ul>
   </li>
   <li>Javascript</li>
</ul>
</body>

</html>

Changing Marker type of Unordered List

以下示例说明了 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>

Unordered List without Bullets

通过设置 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>

Horizontal Unordered List

在这个例子中，我们将创建一个无序列表，并使用 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>

Styling Unordered Lists

无序列表（HTML <ul>）使用 CSS 进行样式设置可以自定义列表的外观，包括修改项目符号、间距和整体设计。以下是示例程序。

<!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>