リストの表示
- ×
マイク
ウェブデザイナー - ×
ジル
サポート - ×
ジェーン
会計士
基本一覧
- ジル
- イブ
- アダム
フチ一覧
- ジル
- イブ
- アダム
一覧ヘッダ
名
- ジル
- イブ
- アダム
例
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
»それを自分で試してみてください カードとして一覧
- ジル
- イブ
- アダム
中心の一覧
- ジル
- イブ
- アダム
色付きのリスト
- ジル
- イブ
- アダム
色付きのリスト項目
- ジル
- イブ
- アダム
Hoverableリスト
W3-hoverableクラスは、マウスオーバーで各リスト項目に灰色の背景色を追加します。
- ジル
- イブ
- アダム
あなたが特定のホバー色をしたい場合は、それぞれの<LI>要素にW3-ホバー・クラスのいずれかを追加します。
- ジル
- イブ
- アダム
開閉可能なリスト
リスト項目を非表示/閉じるには、文字「X」をクリックしてください。
- ジルのx
- アダムのx
- イブのx
例
<li>Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-margin-right w3-medium">x</span>
</li>
»それを自分で試してみてください パッド入り一覧
- ジル
- イブ
- アダム
- ジル
- イブ
- アダム
例
<ul class="w3-ul">
<li class="w3-padding-hor-16">Jill</li>
<li
class="w3-padding-hor-16">Eve</li>
<li class="w3-padding-hor-16">Adam</li>
</ul>
»それを自分で試してみてください アバター一覧
- バツ マイク
ウェブデザイナー - バツ ジル
サポート - バツ ジェーン
会計士
例
<ul class="w3-ul w3-card-4">
<li class="w3-padding-hor-16">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-padding">x</span>
<img src="img_avatar2.png"
class="w3-left w3-circle" style="width:60px">
<span
class="w3-xlarge">Mike</span><br>
<span>Web
Designer</span>
</li>
</ul>
»それを自分で試してみてください タイニー一覧
- ジル
- イブ
- アダム
小一覧
- ジル
- イブ
- アダム
広範なリスト
- ジル
- イブ
- アダム
XLARGE一覧
- ジル
- イブ
- アダム
XXLarge一覧
- ジル
- イブ
- アダム
XXXLarge一覧
- ジル
- イブ
- アダム
ジャンボ一覧
- ジル
- イブ
- アダム