ul与li

### HTML 中 `ul` 和 `li` 标签的使用方法 #### 1. 基本概念 `<ul>` 是无序列表（Unordered List）的缩写，表示一组不带顺序关系的条目集合。 `<li>` 则代表列表中的每一项（List Item），它是 `<ul>` 或者 `<ol>` 的子元素。 #### 2. 默认样式移除 默认情况下，`<ul>` 会带有圆点作为标记，并且会有额外的缩进空间。可以通过 CSS 来清除这些默认样式[^1]： ```css ul { list-style-type: none; /* 移除前面的小圆点 */ padding-left: 0; /* 清除左边的空白区域 */ } ``` 上述代码片段展示了如何通过设置 `list-style-type` 属性为 `none` 来隐藏项目符号以及调整左内边距来去除多余的空白。 #### 3. 创建简单的垂直导航栏 利用 `<ul>` 和 `<li>` 可以轻松构建网站上的导航链接结构。下面是一个基本的例子展示如何制作一个简单的垂直菜单[^2]: ```html <ul> <li><a href="index.html">首页</a></li> <li><a href="about.html">关于我们</a></li> <li><a href="services.html">服务</a></li> <li><a href="contact.html">联系我们</a></li> </ul> ``` 此段代码定义了一个包含四个选项卡的标准导航栏。 #### 4. 实现水平导航栏 为了使导航更美观或者适应不同的设计需求，还可以借助 CSS 将原本竖直排列的列表转换成横排形式: ```css ul.horizontal-menu { display: flex; } ul.horizontal-menu li { margin-right: 15px; } ``` 这段样式的应用可以让所有的 `<li>` 元素并列显示而不是上下堆叠在一起。 #### 5. 动态操作 DOM 节点 JavaScript 提供了强大的功能去动态修改页面内容，比如向现有的 `<ul>` 添加新的 `<li>` 子节点[^4]: ```javascript function addListItem(textContent) { var ul = document.getElementById('my-list'); var newLi = document.createElement('li'); // 创建一个新的<li>元素 newLi.textContent = textContent || '新项目'; // 设置文本内容 ul.appendChild(newLi); // 把新建好的<li>加入到指定的<ul>里 } addListItem("这是新增的第一项"); ``` 以上脚本演示了怎样用 JavaScript 方法往已存在的未编号列表中追加一条记录。 #### 6. 表格模拟布局 除了传统的数据列举用途外，组合运用 `<div>+CSS+<ul>/<li>` 还能模仿传统表格的行为模式[^3]。例如设定固定大小给每一个单元格(`<li>`) 并让它们在同一行上平铺开来形成网格状视图: ```css ul.table-layout { width: 400px; /* 总宽度设为400像素 */ overflow: hidden; /* 隐藏溢出部分 */ } ul.table-layout li { float: left; /* 左浮动使得每项紧挨着前一项 */ width: 100px; /* 单元格宽度定为100像素 */ height: 50px; /* 高度同样限定好 */ border: solid 1px black;/* 边界线增强视觉效果*/ box-sizing: border-box; /* 让边界算入整体尺寸之内 */ } ``` 这里给出了一个例子说明如何配置 CSS 参数从而达到类似 Excel 表格那样的外观表现。 ---