在引导行中以内联方式显示UL LI项

在HTML中，<ul>标签用于创建无序列表，而<li>标签用于定义列表中的每个项目。如果你想在引导行（通常指的是导航栏）中以内联方式显示这些列表项，你可以使用CSS来实现这一效果。

基础概念

无序列表 (<ul>): 用于创建项目符号列表。
列表项 (<li>): 定义列表中的每个项目。
内联显示: 使用CSS的display:inline;或display:inline-block;属性可以使元素在同一行内显示。

类型

纯文本导航: 只包含文本链接的导航栏。
图标加文本导航: 结合了图标和文本的导航项。

应用场景

网站顶部导航: 常用于网站的顶部，提供快速访问主要页面的链接。
侧边栏导航: 在一些应用中，侧边栏导航也会使用内联列表来展示。

示例代码

以下是一个简单的示例，展示了如何在引导行中以内联方式显示<ul>和<li>项：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Navigation</title>
<style>
  ul.nav-inline {
    list-style-type: none; /* 移除默认的项目符号 */
    padding: 0;
    margin: 0;
  }
  ul.nav-inline li {
    display: inline-block; /* 使列表项内联显示 */
    margin-right: 10px; /* 添加一些间距 */
  }
  ul.nav-inline li:last-child {
    margin-right: 0; /* 移除最后一个元素的右边距 */
  }
  ul.nav-inline li a {
    text-decoration: none; /* 移除链接下划线 */
    color: #333; /* 设置链接颜色 */
  }
</style>
</head>
<body>

<ul class="nav-inline">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

</body>
</html>