W3.CSS 列表
基础列表
w3-ul 类用于显示基本列表:
- Jill
- Eve
- Adam
带边框的列表
w3-border 类在列表周围添加边框:
- Jill
- Eve
- Adam
列表标题
如何在列表项中添加标题元素的示例:
Names
- Jill
- Eve
- Adam
实例
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
亲自试一试 »
列表为卡片
w3-card-number 类可用于将列表显示为卡片:
- Jill
- Eve
- Adam
实例
<ul class="w3-ul w3-card-4" style="width:50%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
亲自试一试 »
居中列表
w3-center 类可用于使列表项在列表中居中:
- Jill
- Eve
- Adam
彩色列表
w3-color 类可用于向列表添加颜色:
- Jill
- Eve
- Adam
彩色列表项
w3-color 类可用于向列表项添加颜色:
- Jill
- Eve
- Adam
悬停列表
w3-hoverable 类在鼠标悬停时为每个列表项添加灰色背景色:
- Jill
- Eve
- Adam
如果您想要特定的悬停颜色，请将任何 w3-hover-color 类添加到每个 <li> 元素:
- Jill
- Eve
- Adam
实例
<ul class="w3-ul">
<li class="w3-hover-red">Jill</li>
<li class="w3-hover-blue">Eve</li>
<li class="w3-hover-green">Adam</li>
</ul>
亲自试一试 »
可关闭列表项
点击"x"关闭/隐藏列表项:
- Jill
- Adam
- Eve
实例
<li class="w3-display-container">Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-right">×</span>
</li>
亲自试一试 »
提示: HTML × 实体是关闭按钮的首选图标（而不是字母 "X"）。
带填充的列表
w3-padding 类可用于向列表项添加填充:
- Jill
- Eve
- Adam
- Jill
- Eve
- Adam
实例
<ul class="w3-ul">
<li class="w3-padding-small">Jill</li>
<li
class="w3-padding-small">Eve</li>
<li class="w3-padding-small">Adam</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">Mike</span><br>
<span>Web
Designer</span>
</div>
</li>
亲自试一试 »
提示: 您将在我们的 W3.CSS Bars 和 W3.CSS Navigation 章节中了解有关 w3-bar 类的更多信息
列表宽度
默认情况下，列表的宽度为 100%。 使用 width 属性来改变它。
30% 宽度:
- Jill
- Adam
50% 宽度:
- Jill
- Adam
80% 宽度:
- Jill
- Adam
小列表
使用 w3-tiny 类来显示一个小列表:
- Jill
- Eve
- Adam
小列表
使用w3-small类来显示一个小列表:
- Jill
- Eve
- Adam
大列表
使用w3-large类来显示大列表:
- Jill
- Eve
- Adam
超大列表
使用w3-xlarge 类显示超大列表:
- Jill
- Eve
- Adam
XXLarge 列表
使用w3-xxlarge类来显示XXLarge列表:
- Jill
- Eve
- Adam
XXXLarge 列表
使用w3-xxxlarge类来显示XXXLarge列表:
- Jill
- Eve
- Adam
巨型列表
使用 w3-jumbo 类来显示一个巨大的 "jumbo" 列表:
- Jill
- Eve
- Adam
