菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

W3.CSS 列表


  • ×
    迈克
    网页设计师
  • ×
    Jill
    支持
  • ×
    Jane
    会计

基本列表

w3-ul 类用于显示基本列表

  • Jill
  • Eve
  • Adam

示例

<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
自己试试 »

带边框的列表

w3-border 类在列表周围添加边框

  • Jill
  • Eve
  • Adam

示例

<ul class="w3-ul w3-border">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
自己试试 »


列表标题

在列表项中添加标题元素的示例

  • 姓名

  • 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

示例

<ul class="w3-ul w3-center">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
自己试试 »

彩色列表

w3-color 类可用于为列表添加颜色

  • Jill
  • Eve
  • Adam

示例

<ul class="w3-ul w3-red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
自己试试 »

彩色列表项

w3-color 类可用于为列表项添加颜色

  • Jill
  • Eve
  • Adam

示例

<ul class="w3-ul">
  <li class="w3-blue">Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
自己试试 »

鼠标悬停列表

w3-hoverable 类在鼠标悬停时为每个列表项添加灰色背景色

  • Jill
  • Eve
  • Adam

示例

<ul class="w3-ul w3-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
自己试试 »

如果你想要特定的悬停颜色,请将任何 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">&times;</span>
</li>
自己试试 »

提示: HTML &times; 实体是关闭按钮的首选图标(而不是字母“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>
自己试试 »

头像列表

  • ×
    迈克
    网页设计师
  • ×
    Jill
    支持
  • ×
    Jane
    会计

示例

<li class="w3-bar">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-bar-item w3-button w3-xlarge w3-right">&times;</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 BarsW3.CSS Navigation 章节中学到更多关于 w3-bar 类的内容。


列表宽度

列表默认宽度为 100%。使用 width 属性进行更改。

示例

<ul class="w3-ul" style="width:30%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
自己试试 »

30% 宽度

  • Jill
  • Adam

50% 宽度

  • Jill
  • Adam

80% 宽度

  • Jill
  • Adam

极小列表

使用 w3-tiny 类显示极小列表: 

  • Jill
  • Eve
  • Adam

示例

<ul class="w3-ul w3-tiny">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
自己试试 »

小型列表

使用 w3-small 类显示小型列表:  

  • Jill
  • Eve
  • Adam

示例

<ul class="w3-ul w3-small">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
自己试试 »

大型列表

使用 w3-large 类显示大型列表: 

  • Jill
  • Eve
  • Adam

示例

<ul class="w3-ul w3-large">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
自己试试 »

特大列表

使用 w3-xlarge 类显示特大列表:  

  • Jill
  • Eve
  • Adam

示例

<ul class="w3-ul w3-xlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
自己试试 »

XXL 列表

使用 w3-xxlarge 类显示 XXL 列表:  

  • Jill
  • Eve
  • Adam

示例

<ul class="w3-ul w3-xxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
自己试试 »

XXXL 列表

使用 w3-xxxlarge 类显示 XXXL 列表:  

  • Jill
  • Eve
  • Adam

示例

<ul class="w3-ul w3-xxxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
自己试试 »

巨型列表

使用 w3-jumbo 类显示巨大的“巨型”列表:  

  • Jill
  • Eve
  • Adam

示例

<ul class="w3-ul w3-jumbo">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
自己试试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持