W3.CSS Lists (列表)
基本列表
w3-ul 类用来制作基本列表：
带边框的列表
w3-border 类用于增加列表的边框：
列表标题
如何在列表项内添加标题元素的示例：
实例
<ul class="w3-ul w3-border">
<li><h2>名字</h2></li>
<li>吉尔</li>
<li>夏娃</li>
<li>亚当</li>
</ul>
尝试一下 »
点击“尝试一下”按钮查看在线实例
卡片化列表
使用 w3-card 类将列表卡片化：
实例
<ul class="w3-ul w3-card-4" style="width:50%">
<li>吉尔</li>
<li>夏娃</li>
<li>亚当</li>
</ul>
尝试一下 »
点击“尝试一下”按钮查看在线实例
列表内容居中
用 w3-centered 类将列表的内容居中
彩色列表
w3-color 类可用于将颜色添加到列表：
彩色列表行
使用 w3-color 类来显示彩色行：
实例
<ul class="w3-ul">
<li class="w3-blue">吉尔</li>
<li>夏娃</li>
<li>亚当</li>
</ul>
尝试一下 »
点击“尝试一下”按钮查看在线实例
悬停列表
w3-hoverable 类添加鼠标悬停时在列表上显示灰色的背景色：
实例
<ul class="w3-ul w3-hoverable">
<li>吉尔</li>
<li>夏娃</li>
<li>亚当</li>
</ul>
尝试一下 »
点击“尝试一下”按钮查看在线实例
如果要使用特定的悬停颜色，请将 w3-hover-color 类添加到每个<li>元素：
实例
<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">×</span>
</li>
尝试一下 »
点击“尝试一下”按钮查看在线实例
提示： HTML ＆times; 实体是关闭按钮的首选图标（而不是字母“ X”）。
带有填充的列表
w3-padding 类可用于将填充内容添加到列表项：
实例
<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">×</span>
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
提示： 您将在我们的 W3.CSS Bars 和 W3.CSS Navigation 章节中了解有关 w3-bar 类的更多信息。
列表宽度
默认情况下，列表的宽度为 100％。使用 width 属性更改此设置。
实例
<ul class="w3-ul" style="width:30%">
<li>吉尔</li>
<li>夏娃</li>
<li>亚当</li>
</ul>
尝试一下 »
点击“尝试一下”按钮查看在线实例
Tiny 列表
使用 w3-tiny 类制作 Tiny 列表：
Small 列表
使用 w3-small 类制作 Small 列表：
Large 列表
使用 w3-large 类制作 Large 列表：
XLarge 列表
使用 w3-xlarge 类制作 XLarge 列表：
XXLarge 列表
使用 w3-xxlarge 类制作 XXLarge 列表：
XXXLarge 列表
使用 w3-xxxlarge 类显示 XXLarge 列表：
Jumbo 列表
使用 w3-jumbo 类制作 Jumbo 列表：
更多建议：