HTML 内联列表

在 HTML 中，列表是一种非常有用的元素，可以让我们以有序或无序的方式组织页面的内容。HTML 中的列表有三种类型：有序列表（ordered list）、无序列表（unordered list）和定义列表（definition list）。本文将介绍如何使用 HTML 内联列表。

什么是 HTML 内联列表？

内联列表属于无序列表的一种，与有序列表和定义列表不同。内联列表使用 HTML 的 <ul> 标签表示，列表项使用 <li> 标签表示。同样的，内联列表使用无序的形式展示内容，只不过所有列表项都在同一行内。

举个例子，以下是一个使用内联列表展示的网站导航菜单：

<ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

这段代码将生成四个链接，每个链接都在同一行内。

如何创建 HTML 内联列表？

要创建 HTML 内联列表，只需要像创建其他列表一样使用 <ul> 和 <li> 标签即可。不同的是，在 CSS 中需要将 <li> 标签设置为 display: inline-block;。这个属性可以让列表项都排列在同一行内。

以下是一个简单的例子：

<ul style="list-style:none;">
  <li style="display:inline-block;"><a href="#">列表项1</a></li>
  <li style="display:inline-block;"><a href="#">列表项2</a></li>
  <li style="display:inline-block;"><a href="#">列表项3</a></li>
</ul>

注意，这里我们还添加了一个 style 属性来隐藏了默认的有序列表样式。

总结

HTML 内联列表是一种用于将多个列表项放在同一行内的非常方便的方式。通过将 <li> 标签设置为 display: inline-block;，我们可以很容易地创建内联列表。