Template:Flatlist/doc
Jump to navigation
Jump to search
This is a community contributed page
This is a documentation subpage for Template:Terminate sentence It contains usage information, categories and other content that is not part of the original template page. |
This template uses TemplateStyles: |
This template provides a WCAG/ISO-standards-compliant accessible alternative to comma or dash (or other single character) separated lists.
Usage
{{flatlist}} starts a horizontal list, such as:
- cat
- dog
- horse
- cow
- sheep
- pig
Optional parameters
class
- Adds a CSS class to the containing div. Use
nowraplinks
to prevent links from wrapping. style
- Adds CSS styling to the containing div.
- Example:
|style=border:solid 1px silver; background:lightyellow
indent
- Indents the list by a number of standard indents, one indent being 1.6em (useful in an indented discussion thread).
- Example:
|indent=2
Examples
{{flatlist|
* cat
* dog
* horse
* cow
* sheep
* pig
}}
produces:
- cat
- dog
- horse
- cow
- sheep
- pig
Syntax for ordered lists
{{flatlist| # first # second # third # fourth # fifth # sixth }}
produces:
- first
- second
- third
- fourth
- fifth
- sixth
Using optional parameters
{{flatlist |indent=2
|style=border:solid 1px silver; background:lightyellow;
|class=nowraplinks |
* Alpine skiing at the 1936 Winter Olympics
* Alpine skiing at the 1948 Winter Olympics
* Alpine skiing at the 1952 Winter Olympics
* Alpine skiing at the 1956 Winter Olympics
* Alpine skiing at the 1960 Winter Olympics
* Alpine skiing at the 1964 Winter Olympics
}}
produces:
- Alpine skiing at the 1936 Winter Olympics
- Alpine skiing at the 1948 Winter Olympics
- Alpine skiing at the 1952 Winter Olympics
- Alpine skiing at the 1956 Winter Olympics
- Alpine skiing at the 1960 Winter Olympics
- Alpine skiing at the 1964 Winter Olympics
Technical details
This template uses the .hlist
CSS class defined in the TemplateStyles to generate horizontal lists. It causes ordinary HTML list items to be displayed inline (horizontally), where they would normally display as block elements (vertically). The class also generates the interpuncts between list items and parentheses around nested lists.
Wikitext | Expanded template | HTML |
---|---|---|
{{flatlist| * cat * dog * horse * cow * sheep * pig }} |
<div class="hlist hlist-separated " > * cat * dog * horse * cow * sheep * pig </div> |
<div class="hlist">
<ul><li>cat</li>
<li>dog</li>
<li>horse</li>
<li>cow</li>
<li>sheep</li>
<li>pig</li></ul>
</div>
|
See also
- {{multi-column numbered list}}
- {{nowrap}}
- {{pagelist}}
- Help:Lists