Foundation List
In HTML unordered list ( <ul>
) instance as follows:
<Ul>
<Li> List item </ li >
<Li> List item </ li >
<Li> List item </ li >
<Li> List item </ li >
</ Ul>
<Li> List item </ li >
<Li> List item </ li >
<Li> List item </ li >
<Li> List item </ li >
</ Ul>
result:
- List item
- List item
- List item
- List item
Circle identifier
In Foundation, the unordered list ( <ul>
) prefix notation as circles, use .circle class, examples are as follows:
<Ul class = "circle">
<Li> List item </ li >
/en.
</ Ul>
<Li> List item </ li >
/en.
</ Ul>
Block identifier
Block identifier prefix .square categories:
<Ul class = "square">
<Li> List item </ li >
/en.
</ Ul>
<Li> List item </ li >
/en.
</ Ul>
No identifier
If you do not have an identifier, you can use the class .no-bullet:
<Ul class = "no-bullet ">
<Li> List item </ li >
/en.
</ Ul>
<Li> List item </ li >
/en.
</ Ul>
If you need to add a horizontal list, you can <ul>
Add on .inline-list
category:
<Ul class = "inline-list ">
List menu
Some Web pages may need to list menu.
HTML, menu list with unordered list <ul>
to define, for example:
<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>
<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>
result: