ul和li的用法
时间: 2025-03-07 10:05:34 浏览: 62
### HTML `ul` 和 `li` 标签使用教程
#### 一、基本结构
在HTML文档中,`<ul>`代表无序列表(unordered list),而`<li>`则表示列表项(list item)。通常用于创建项目列表。下面是一个简单的例子来展示如何构建一个基础的无序列表[^3]。
```html
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
```
此代码片段会渲染成带有圆点标记的三个条目组成的垂直列表。
#### 二、去除默认样式
为了移除`<ul><li>`前的小黑点以及它们之间的空白区域,在CSS文件或者页面内的`<style>`标签里加入特定的选择器规则可以实现这一点[^1]:
```css
ul {
list-style-type: none; /* 移除前面的小图标 */
padding-left: 0px; /* 清除左边距 */
}
```
这段CSS将会使上述示例中的水果名称不再伴有任何装饰性的符号,并紧贴左侧边界排列。
#### 三、控制水平布局及其间隔调整
当希望将多个`<li>`元素横向并列放置时,可以通过设置浮动属性或将display设为inline-block等方式达成目的;与此同时,利用`margin`或`padding`属性可方便地调节相邻两项间的距离大小[^2]。
以下是通过float方式实现水平分布的例子:
```html
<style>
.horizontal-list li{
float:left;
margin-right:1em;/* 设置右边框距 */
}
</style>
<ul class="horizontal-list">
<li>链接A</li>
<li>链接B</li>
<li>链接C</li>
</ul>
```
另外一种更现代的方法是采用flexbox布局模式来进行更加灵活多变的设计安排。
#### 四、嵌套列表支持
值得注意的是,不仅可以在单层`<ul>`内部添加若干个`<li>`作为其直接子节点,还允许在一个已有的`<li>`之内再引入新的`<ul>`容器,从而形成层次化的数据展现形式。
例如:
```html
<ul>
<li>主要分类
<ul>
<li>次级类别1</li>
<li>次级类别2</li>
</ul>
</li>
<!-- 更多项 -->
</ul>
```
这样就可以轻松表达出具有父子关系的信息架构了。
阅读全文
相关推荐

















