HTML <li>标签，定义列表项，实现导航条实例

<li>标签

li元素定义HTML文档中有序列表ol、无序列表ul和menu元素定义的菜单项的列表项，一般包含于这些元素的标签之内。<li>标签在web的前端开发中是一个十分常见的标签，比如用来定义导航条。

<li></li>

提示：li元素包含起始标签和结束标签。

---

li元素实例代码，及在线编辑器

下面的实例将呈现一个简单的导航条：

<div class='e1'>
  <ul class='e2'>
    <li><a href='#'>首页</a></li>
    <li><a href='#'>python</a></li>
    <li><a href='#'>HTML</a></li>
    <li><a href='#'>CSS</a></li>
    <li><a href='#'>JavaScript</a></li>
  </ul>
</div>

<style>
  .e1{width:100%;height:50px;background-color:skyblue;border-radius:5px;}
  .e2{list-style:none;line-height:50px;}
  .e2 li{display:inline-block;margin-left:2%;}
</style>

试一试

实例代码提示

如上代码，如果有CSS基础，则可以理解style元素内的层叠样式设计，如果没有，也没关系，在li元素这章节当中，只要了解li元素可以用来定义导航条中的列表项即可。

---