W3.CSS 列表
基本列表
这 w3-ul 类用于显示基本列表：
- 吉尔
- 前夕
- 亚当
有界列表
这 w3-边框 该类在列表周围添加了边框：
- 吉尔
- 前夕
- 亚当
列表标题
如何在列表项中添加标题元素的示例：
名字
- 吉尔
- 前夕
- 亚当
以卡片形式列出
这 w3-卡-数字 类可用于将列表显示为卡片：
- 吉尔
- 前夕
- 亚当
居中列表
这 w3-中心 类可用于将列表项置于列表中的中心：
- 吉尔
- 前夕
- 亚当
彩色列表
这 w3-颜色 类可用于向列表添加颜色：
- 吉尔
- 前夕
- 亚当
彩色列表项
这 w3-颜色 类可用于为列表项添加颜色：
- 吉尔
- 前夕
- 亚当
悬停列表
这 w3-可悬停 该类为鼠标悬停在每个列表项上时添加灰色背景颜色：
- 吉尔
- 前夕
- 亚当
如果您想要特定的悬停颜色，请添加任意 w3-悬停-颜色 各班<li>元素：
- 吉尔
- 前夕
- 亚当
例子
<ul class="w3-ul">
<li class="w3-hover-red">吉尔</li>
<li class="w3-hover-blue">前夕</li>
<li class="w3-hover-green">亚当</li>
</ul>
亲自尝试 »
可关闭列表项
单击“x”关闭/隐藏列表项：
- 吉尔
- 亚当
- 前夕
例子
<li class="w3-display-container">吉尔
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-right">×
</li>
亲自尝试 »
提示： HTML × 实体是关闭按钮的首选图标（而不是字母“X”）。
带填充的列表
这 w3-填充 类可用于向列表项添加填充：
- 吉尔
- 前夕
- 亚当
- 吉尔
- 前夕
- 亚当
例子
<ul class="w3-ul">
<li class="w3-padding-small">吉尔</li>
<li class="w3-padding-small">前夕</li>
<li class="w3-padding-small">亚当</li>
</ul>
亲自尝试 »
头像列表
例子
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'"
class="w3-bar-item w3-button w3-xlarge w3-right">×
<img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">
<div class="w3-bar-item">
<span class="w3-large">麦克风</span><br>
<span>网站设计者</span>
</div>
</li>
亲自尝试 »
列表宽度
列表默认宽度为 100%。使用 width 属性可以更改此设置。
30％宽度：
- 吉尔
- 亚当
50％宽度：
- 吉尔
- 亚当
80％宽度：
- 吉尔
- 亚当
小清单
使用 w3-tiny 类来显示一个小列表：
- 吉尔
- 前夕
- 亚当
小列表
使用 w3-小 类来显示一个小列表：
- 吉尔
- 前夕
- 亚当
大列表
使用 w3-大 类来显示一个大列表：
- 吉尔
- 前夕
- 亚当
超大列表
使用 w3-xlarge 类来显示一个超大的列表：
- 吉尔
- 前夕
- 亚当
超大列表
使用 w3-xxlarge 类来显示 XXLarge 列表：
- 吉尔
- 前夕
- 亚当
XXX大型列表
使用 w3-xxxlarge 类来显示 XXXLarge 列表：
- 吉尔
- 前夕
- 亚当
巨型列表
使用 w3-巨型 类来显示一个巨大的“巨型”列表：
- 吉尔
- 前夕
- 亚当
