Foundation 列表

在 HTML 中，无序列表 (

) 实例如下:
< ul >
< li >List item < /li >
< li >List item < /li >
< li >List item < /li >
< li >List item < /li >
< /ul >

结果:

• List item

• List item

• List item

• List item

圆圈标识符

在 Foundation 中，无序列表 (

) 的前缀符号为圆圈，使用 .circle 类，实例如下:

实例

          
  
圆圈标识符列表
 
 
List item
 
List item
 
List item
 
List item
 
  


运行实例 »

点击 "运行实例" 按钮查看在线实例

方块标识符

方块标识符前缀使用 .square 类:

实例

          
  
方块标识符列表
 
 
List item
 
List item
 
List item
 
List item
 
  


运行实例 »

点击 "运行实例" 按钮查看在线实例

无标识符

如果你不需要标识符，你可以使用 .no-bullet 类：

实例

          
  
无标识符列表
 
 
List item
 
List item
 
List item
 
List item
 
  


运行实例 »

点击 "运行实例" 按钮查看在线实例

如果你需要添加一个水平的列表，可以在

上添加.list-inline类:

实例

          
  
无标识符列表
 
 
List item
 
List item
 
List item
 
List item
 
  


运行实例 »

点击 "运行实例" 按钮查看在线实例

---

列表菜单

一些 Web 页面可能需要列表菜单。

在 HTML 中，列表菜单同无序列表

来定义，例如:
< ul >
< li > < a href= "#" >Home < /a > < /li >
< li > < a href= "#" >Menu 1 < /a > < /li >
< li > < a href= "#" >Menu 2 < /a > < /li >
< li > < a href= "#" >Menu 3 < /a > < /li >
< /ul >

结果:

• Home

• Menu 1

• Menu 2

• Menu 3

如果你需要添加一个水平的菜单，可以在

上添加.list-inline类:

实例

          
  
内联列表
 
 
Home
 
Menu 1
 
Menu 2
 
Menu 3
 
  


运行实例 »

点击 "运行实例" 按钮查看在线实例