Html 简明教程

HTML - Unordered Lists

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

HTML Unordered List is used to display a collection of related items that do not have a specific order or sequence. We can make unordered in HTML using <li> element nested with <ul> element.

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

The below image shows an unordered list of groceries:

Unordered HTML List - Choose List Item Marker

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

The type attribute for <ul> tag is used to specify the type of bullet to the unordered list in HTML. By default, disc bullet type is used. But, we can change this with the help of following options.

Attribute Value

Description

disc

It is the default type of marker.

square

List items will be displayed with a square marker.

circle

It will set the marker to a hollow circle.

Examples of Unordered List

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

Below examples will illustrate the HTML Unordered list, where and how we should use this property of HTML.

Create a Unordered List

以下示例演示如何在 HTML 中创建无序列表。以下示例显示了带有默认圆盘项目符号的无序列表。

The following example demonstrates how to create an unordered list in HTML. The below example displays an unordered list with default disc bullets.

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

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

In the following example we will create nested unordered list by defining list inside the 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 中不同类型的无序列表。

The following example illustrates different types of unordered list in 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" 属性，你可以创建没有项目符号标记的无序列表。以下代码演示了此过程。

By setting style="list-style-type: none" attribute for ul tag, you can create unordered list without bullet markers. Following code demonstrates this process.

<!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 属性将其设为水平排布。

Here in this example we will create an unordered list and make that list horizontal using CSS properties.

<!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 进行样式设置可以自定义列表的外观，包括修改项目符号、间距和整体设计。以下是示例程序。

Styling an unordered list (HTML <ul>) using CSS allows for customization of the list’s appearance, including modifying bullet points, spacing, and overall design. Below is the example program.

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