How to use ul and li in html

Ul (unordered list) in HTML is used to create a list of items, while li (list item) represents individual items in the list. Here's how to use it: Create an unordered list:

• Item

Style the list: Use nested lists via CSS styles, such as modifying markup type, padding, and spacing ：

• Project
  • Subproject

How to use ul and li in HTML

What are ul and li?

• ul (unordered list): is used to create a list of items, with no specific order between the items.
• li (list item): represents each item in the unordered list.

How to use ul and li?

Create an unordered list:

<code class="html"><ul>
  <!-- 无序列表中的项目 -->
</ul></code>

Add list items:

<code class="html"><ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul></code>

Set the list style

You can pass CSS styles to set the appearance of unordered lists, for example:

<code class="css">ul {
  list-style-type: none;  /* 去除默认的圆点标记 */
  padding: 0;             /* 设置内边距为 0 */
}

li {
  display: inline-block;    /* 设置列表项为内联元素 */
  margin-right: 10px;     /* 设置列表项之间的间距 */
}</code>

Using nested lists

You can use nested lists to create multi-level lists:

<code class="html"><ul>
  <li>项目 1
    <ul>
      <li>子项目 1</li>
      <li>子项目 2</li>
    </ul>
  </li>
  <li>项目 2</li>
</ul></code>

The above is the detailed content of How to use ul and li in html. For more information, please follow other related articles on the PHP Chinese website!