Template:Horizontal list/doc

__EXPECTED_UNCONNECTED_PAGE__

This template creates horizontal lists. Each item in the list may be individually styled with CSS.

Lists output by {{Flatlist}} and {{Horizontal list}} are semantically and visually identical, and differ only in the wiki markup used to create the lists.

Usage

Basic usage

{{horizontal list|first item|second item|third item|...}}

All parameters

{{horizontal list
|first item|second item|third item|...
|class       = class for div tag
|style       = style for div tag
|list_style  = style for ul tag
|item_style  = style for all li tags
|item1_style = style for first li tag
|item2_style = style for second li tag
|...
|indent      = the number of tabs to indent
}}

Example

{{horizontal list|Jazz|rock|pop|rap}}

produces:

• Jazz
• rock
• pop
• rap

Parameters

• Positional parameters (1, 2, 3...): these are the list items. If no list items are present, the module will output nothing.
• class: a custom class for the <div>...</div> tags surrounding the list. Set to inline when using {{horizontal list}} inside text.
• style: a custom CSS style for the <div>...</div> tags surrounding the list, e.g. font-size: 90%;.
• list_style: a custom CSS style for the <ul>...</ul> tags around the list. The format is the same as for the |style= parameter.
• item_style: a custom CSS style for all of the list items (the <li>...</li> tags). The format is the same as for the |style= parameter.

  Avoid using the style white-space:nowrap in the item_style parameter, because it will have the unintended effect of avoiding line breaks anywhere in the list, instead of just inside the list item; the workaround is to move this style in the list_style parameter, and then insert {{Wbr}} at the beginning of each item value, to insert an invisible word-break opportunity (and not at end of the item value, as the word-break would occur just before the trailing spaced-bullet separator).

• item1_style, item2_style, item3_style...: custom CSS styles for each of the list items. The format is the same as for the |style= parameter.
• indent: the number of tabs to indent the list. Default value is 0.

Examples

Markup	Renders as
{{horizontal list|entry1|entry2|entry3|entry4|entry5|entry6|entry7|entry8|entry9}}	entry1 entry2 entry3 entry4 entry5 entry6 entry7 entry8 entry9
✘ Giant planets ({{horizontal list|[[Jupiter|J]]|[[Saturn|S]]|[[Uranus|U]]|[[Neptune|N]]}}).	✘ Giant planets ( J S U N ). (incorrect markup)
✔ Giant planets ({{horizontal list|class=inline|[[Jupiter|J]]|[[Saturn|S]]|[[Uranus|U]]|[[Neptune|N]]}}).	✔ Giant planets ( J S U N ). (correct markup)
{{horizontal list|Winner|Runner-up|Third place|indent=2}}	Winner Runner-up Third place
{{horizontal list|Winner|Runner-up|Third place|item_style=color:blue;}}	Winner Runner-up Third place
{{horizontal list|Winner|Runner-up|Third place|item1_style=background-color:yellow;color:black;|item2_style=background-color:silver;color:black;}}	Winner Runner-up Third place

Avoiding Linter errors

{{Horizontal list}} will produce Linter errors if placed inside a template that uses <span>...</span> tags, such as {{small}}, {{larger}}, etc. To avoid this, use the substitutions from the table below:

N Incorrect markup	Y Correct markup
{{small|{{horizontal list|...}}}}	{{horizontal list|...|style=font-size:85%}}
{{resize|{{horizontal list|...}}}}	{{horizontal list|...|style=font-size:90%}}
{{midsize|{{horizontal list|...}}}}	{{horizontal list|...|style=font-size:92%}}
{{larger|{{horizontal list|...}}}}	{{horizontal list|...|style=font-size:120%}}
{{big|{{horizontal list|...}}}}	{{horizontal list|...|style=font-size:120%}}
{{large|{{horizontal list|...}}}}	{{horizontal list|...|style=font-size:120%}}
{{huge|{{horizontal list|...}}}}	{{horizontal list|...|style=font-size:180%}}
{{resize|x%|{{horizontal list|...}}}}	{{horizontal list|...|style=font-size:x%}}
{{font|size=x%|{{horizontal list|...}}}}	{{horizontal list|...|style=font-size:x%}}
{{nowrap|{{horizontal list|...}}}}	Don't do this, it's rarely appropriate.

Horizontal list {{horizontal list|item1 |item2 }} item1 item2		Horizontal list {{flat list| * item1 * item2}} item1 item2		Horizontal list {{comma-separated list|item1 |item2 }} item1 item2
Bulleted list {{bulleted list|item1 |item2 }} item1 item2		Numeric ordered list {{Ordered list|first |second }} first second		Alphabetic ordered list {{Ordered list|list_style_type=lower-alpha |first |second }} first second
Unbulleted list {{unbulleted list|item1 |item2 }} item1 item2		Unbulleted list {{plain list| * item1 * item2}} item1 item2		Glossary or definition list {{glossary}} {{term|first term}} {{defn|first description}} {{term|second term}} {{defn|second description}} {{glossary end}} first term first description second term second description
Bulleted list to flow around an image [[File:Bad Title Example.png|left|thumb|100px]] {{flowing list| *item1 *item2}} item1 item2		Ordered list in columns {{columns list|colwidth=5em| # first # second}} first second