W3.CSS 列表
基本列表
w3-ul 類用於顯示基本列表
- Jill
- Eve
- Adam
帶邊框的列表
w3-border 類在列表周圍新增邊框
- Jill
- Eve
- Adam
列表標題
在列表項中新增標題元素的示例
姓名
- Jill
- Eve
- Adam
示例
<ul class="w3-ul w3-border">
<li><h2>姓名</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
XXL 列表
使用 w3-xxlarge 類顯示 XXL 列表：
- Jill
- Eve
- Adam
XXXL 列表
使用 w3-xxxlarge 類顯示 XXXL 列表：
- Jill
- Eve
- Adam
巨型列表
使用 w3-jumbo 類顯示巨大的“巨型”列表：
- Jill
- Eve
- Adam
