Edge Rewrite
// HTMLRewriter · presentation

This page was redesigned at the edge.

Cloudflare fetched the original article and streamed it through HTMLRewriter to apply an entirely new visual system without rebuilding the source page.

Jump to content

Template:Horizontal list/doc

From Wikipedia, the free encyclopedia

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

[edit]

Basic usage

[edit]
{{horizontal list|first item|second item|third item|...}}

All parameters

[edit]
{{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

[edit]
{{horizontal list|Jazz|rock|pop|rap}}

produces:

  • Jazz
  • rock
  • pop
  • rap

Parameters

[edit]
  • 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

[edit]
MarkupRenders 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 (). (incorrect markup)
✔ Giant planets ({{horizontal list|class=inline|[[Jupiter|J]]|[[Saturn|S]]|[[Uranus|U]]|[[Neptune|N]]}}).
✔ Giant planets (). (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

[edit]

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

X markN Incorrect markupcheckY 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.