Foundation 列表 - 学习 Foundation 5 - 简单教程，简单编程

HTML 中的无序列表 ( <ul> ) 使用语法如下

<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 中，无序列表 ( <ul> ) 的前缀符号为圆圈，使用 .circle 类

<ul class="circle">
    <li>List item</li>
    ...
</ul>

运行范例 »

方块标识符

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

<ul class="square">
    <li>List item</li>
    ...
</ul>

运行范例 »

无标识符

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

<ul class="no-bullet">
    <li>List item</li>
    ...
</ul>

运行范例 »

水平列表

如果需要添加一个水平的列表，可以在 <ul> 上添加 .inline-list

<ul class="inline-list">

运行范例 »

列表菜单

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

在 HTML 中，列表菜单使用无序列表 <ul> 来定义

<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>

结果