Foundation 列表

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

結果:

• Home

• Menu 1

• Menu 2

• Menu 3

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！