How do I arrange list items horizontally? Stylish examples of styling ul li CSS lists What the ul ol li tags stand for

Description

Attributes

Note: The reversed attribute is only supported by Chrome and Safari.

Start: Sets the starting integer value from which to start numbering items in the list. Example »type: Defines the type of marker that will be used for list items:

• 1 - decimal numbers (1, 2, 3, 4 ...).
• A - Latin letters in alphabetical order, in upper case (A, B, C, D ...).
• a - Latin letters in alphabetical order, in lower case (a, b, c, d ...).
• I - uppercase roman numerals (I, II, III, IV ...).
• i - Roman numerals in lower case (i, ii, iii, iv ...).
Example "

Tag

also supports Global Attributes and Events

Default style

ol (display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px;)

Example

1. Coffee
2. Tea
3. Milk
50. Coffee
51. Tea
52. Milk

The only difference is that this tag is strictly made for numbering lists. The name of the tag comes from the English abbreviation "Ordered List" - numbered list.

Tag syntax

1. Item # 1
2. Item # 2
3. Item # 3
4. ...

Where the type \u003d "value" attribute can take the following values

• A - sets markers in the form of uppercase Latin letters (A, B, C ..);
• a - sets markers in the form of lowercase Latin letters (a, b, c ..);
• I - sets markers in the form of large Roman numerals (I, II, III, IV ..);
• i - specifies markers in the form of small Roman numerals (i, ii, iii, iv ..);
• 1 (default) - sets markers in the form of Arabic numerals (1, 2, 3 ..);

The start \u003d "value" attribute sets the initial value (starting value) of the report.

The reversed attribute specifies a reverse count (if necessary).

Tag

requires the mandatory use of an end tag

A pair tag is used to form list items

1. ... Between the opening and closing tags are individual words, phrases, paragraphs, images, chunks of code and much more, which are the contents of a bulleted list.

   Note

   Inside the list, you can change the account to your own. For this there is a special attribute value \u003d "" for the tag

2. to which some numeric value is assigned. for example

   1. Item # 1
   10. Item # 2
   11. Item # 3

   Examples with numbered lists in html (

   )

   Example 1. A numbered list of html in the form of Latin letters

   Example with uppercase letters

   1. Item # 1
   2. Item # 2
   3. Item # 3

   1. Item # 1
   2. Item # 2
   3. Item # 3

   Example with lowercase letters

   1. Item # 10
   2. Item # 11
   3. Item # 12

   This is how it looks on the page:

   1. Item # 1
   2. Item # 2
   3. Item # 3

   Example 2. Numbered html list in roman letters

   Example with uppercase letters

   1. Item # 1
   2. Item # 2
   3. Item # 3

   This is how it looks on the page:

   1. Item # 1
   2. Item # 2
   3. Item # 3

   Example with lowercase letters

   1. Item # 1
   2. Item # 2
   3. Item # 3

   This is how it looks on the page:

   1. Item # 1
   2. Item # 2
   3. Item # 3

   Example 3. Numbered html list different start position

   An example that shows the capabilities of the start attribute, which allows you to set the starting value of the counter.

   50. Item # 1
   51. Item # 2
   52. Item # 3

   This is how it looks on the page:

   1. Item # 1
   2. Item # 2
   3. Item # 3

   Example 4. Changing the account in numbered html lists

   Below is an example with the ability to change the counter values \u200b\u200busing the value attribute when displaying new elements in tags

3. .

   10. Item # 1
   11. Item # 2
   100. Item # 3
   101. Item # 4

   This is how it looks on the page:

   1. Item # 1
   2. Item # 2
   3. Item # 3
   4. Item # 4

   Example 5. Reversible numbered list in html

   Below is an example of a reverse numbered list (counting in reverse order).

   10. Item # 1
   11. Item # 2
   12. Item # 3
   13. Item # 4

   This is how it looks on the page:

   1. Item # 1
   2. Item # 2
   3. Item # 3
   4. Item # 4

   Lists can be numbered and unnumbered.

   Numbered lists are output by code:

   List with numbers
   1. paragraph 1
   2. point 2
   3. point 3

   Unnumbered lists are output by the code:

   List with check marks or other symbols
   • paragraph 1
   • paragraph 1
   • paragraph 1

   Each item on any list is enclosed in an li tag. All list items are wrapped in one common ul or ol tag. The styles of these tags are written in the stylesheet.

   For each tag, specific visual styles are assigned. They indicate indents from the text.

   For a numbered list, numbering styles are prescribed for each item.

   Standard Arabic numerals are described by the decimal value.

   list-style-type: decimal; /*Arabic numerals*/

   For a bulleted list, you specify the character style - squares or circles.

   list-style-type: circle; / * circles * /
   list-style-type: square; / * squares * /

   Each menu item can be assigned an image.

   list-style-image: url (‘path to image’);

   Usually, in templates, a numbered list is formatted with simple numbers, and not numbered - with black squares and circles. It's boring and inexpressive. Let's fix this.
   

   Where are the list styles in the Twenty Eleven template?

   Open the stylesheet style.css. Find the section called / * Text elements * /

   The standard code looks like this:

   How do I arrange a numbered list?

   Numbered list using background

   Look at this nice numbered list design.

   Like? Let's do it again.

   Find styles for the ol tag. Add new properties to it.

   Ol (padding: 0px 0 0 20px; margin: 0.5em 0 1.571em 1.9em; color: # 2E2E2E; list-style-type: none; font: 15px / 17px Verdana, Arial, Helvetica, sans-serif; z-index : 2; counter-reset: point;) ol li (margin-bottom: 4px; line-height: 1.6; color: # 2E2E2E; position: relative;) ol li: before (margin-bottom: 4px; counter-increment: point 1; line-height: 1.6; height: 24px; margin-left: -36px; left: 0px; width: 24px; margin-top: 1px; background: # BDC3C7; content: counter (point); text-align: center; position: absolute; font-weight: bold;)

   In order for you to understand where what you need to change for your design, let's take this code down the shelves.

   list-style-type: none; - disables output of standard digits
   counter-reset: point; - sets a variable for the numbering counter
   position: relative; - places numbering near the points themselves

   before is a pseudo-element for the ol li tag. Has the following styles:
   content: counter (point); - displays the value of a variable
   counter-increment: point 1; - increases counter by 1
   position: absolute;
   background: # BDC3C7; - background for numbers (background can be set with color or a beautiful icon
   margin - margins
   padding - padding
   color - element text color
   background - background
   text-align - text alignment
   font-weight - weight (weight) of the font

   In your styles, you can set any colors, alignments, font sizes and indents.

   Numbered list with a unique image for each item

   One site for women has some very attractive numbered lists.

   How is this implemented? Let's take a look at the following code:

   / * first number * / ol li: first-child (list-style-image: url (path to image with number 1);) / * second number * / ol li: nth-child (2n) (list-style- image: url (path to image with number 2);) / * third number * / ol li: nth-child (3n) (list-style-image: url (path to image with number 3);) / * fourth number * / ol li: nth-child (4n) (list-style-image: url (path to the image with the number 4);) / * Next, we write in the same way only for the following item numbers * /

   In the code of such a numbered list, you need to list all the item numbers and assign a unique icon to each of them.

   If in lists in articles you use up to 20 numbered items, then you need to register the nth-child (An) pseudo-class 20 times. So that the last in the styles is the nth-child (20n) pseudo-class.

   Find the lines in the stylesheet that describe the appearance of the numbered list (ol li tags).

   Add the first-child pseudo-class to it. Copy and paste it once, then change this property to nth-child (An) and copy as many numbers as you want your icon to have. Add item numbers.

   For each number, add a list-style-image property with its own unique icon.

   If the icons on the site are located far from the points or overlap them, then you need to edit the alignment and indents of the digital icons or the text of the points.
   

   How to arrange a bulleted (unnumbered) list?

   Bulleted list ul li with alternating icons

   I really liked this bulleted list.

   Ul (padding: 11px 0 5px 0;) ul li (padding-left: 32px; margin-bottom: 10px; font: normal 15px Verdana, sans-serif; color: # 2E2E2E; line-height: 1.6; border-bottom: 1px dashed #ccc; padding-bottom: 10px;) ul li: before (content: ""; position: absolute; width: 27px; height: 24px; margin-left: -35px; margin-top: -2px; background: url ("images / sprite.jpg") 0px 2px no-repeat; list-style-type: circle;) ul li: nth-child (2n): before (content: ""; position: absolute; width: 27px; height: 43px; margin-left: -35px; margin-top: -2px; background: url ("images / sprite.jpg") 0px -17px no-repeat; list-style-type: circle;)

   Instead of the standard list-style-type style, you can assign the "path to icon" property - list-style-image: url. But then you need to register the outer left margin from the edges of the site - without it, the icons will not be displayed, they will go beyond the content area.

   For the experiment, you can assign indents:

   Ul li (list-style-image: url (images / radio.png); margin-left: 30px;)

   The alternation of icons can be set with the nth-child (An) property. The above example uses the before pseudo-element.

   The code contains one pseudo-class nth-child (2n). Its value is 2. It turns out that each even item has a different icon. If instead of 2n you write 2n + 1, then the other icon will fall on odd points.

   You can set an underscore for each item in the list. In the example shown, items are underlined with a dotted line.

   Also, each item can be assigned frames, background, icons. Just don't be too smart. Our task is not to defeat everyone with a fancy design, but to improve the quality of content perception.
   

   How to display multiple lists with different design on a page?

   Sometimes you need to place several lists with different styles.

   If you assign common styles, then the same appearance will be assigned to all lists. Different lists can be displayed if you assign a separate id to the ol or ul tag and register it in the html article editing mode. Well, in the stylesheet for this id, you need to register separate styles.

   For example, here's one nice layout for the content:

   In HTML, you write the list like this:

   Content
   1. paragraph 1
   2. point 2
   3. point 3

   In CSS, you would write styles like this:

   Ol # sod (padding: 0px 20px 10px 51px; margin: 0.5em 0 0em 1em; color: # 2E2E2E; list-style-type: none; background: # f1f4f5; border-left: # BDC3C7 4px solid; display: inline- block;) ol # sod li () ol # sod li: before (font-weight: normal! important)

   The new style differs from the main ol tag: background, display style, line to the left of the content.

   Using several lists of different design in the text, you will make the presentation of information even more interesting. When listing any items, you can set some icons, and when listing actions, others. Here, the design is limited only by your imagination.

   These methods are also applicable in the design of menu items, categories and any other elements of the site.
   

   How do I create anchor links in a content list?

   How to write them in HTML code? One piece of code frames the anchor of the link, and another piece of code is placed next to the place where we need to be dropped when we click on the link.

   Content
   1. Heading 1
   2. Heading 2
   3. Heading 3

   And in the text of the article you need to write like this:

   Heading 1 ... Heading 2 ... Heading 3 ...

   Maybe more experienced webmasters will correct me in something. I just recommend what I have tried in practice myself.

   If you still have any questions, I will be glad to see them in the comments.

   Ageeva Veronika.

   Perhaps you will also be interested in:

   HTML tags

   Meaning and application

   A numbered (ordered) list is for items that follow in a specific order. A numbered list starts with a tag

   (short for English ordered list - ordered list). Each list item starts with a tag
   1. (list item).

      Browser support

      Attribute			Opera		IExplorer	Edge
      start, type	Yes	Yes	Yes	Yes	Yes	Yes
      reversed	Yes	Yes	Yes	Yes	Not	Not

      Attributes

      Attribute	Value	Description
      compact	compact	Not supported in HTML5. Indicates that the list should be smaller than the normal size (line-height: 80%). Use CSS instead of this attribute.
      	reversed	Indicates that the order in a numbered (ordered) list should be descending. The attribute is not supported by Internet Explorer and Edge browsers.
      start	number	Determines the starting value of an ordered (ordered) list. Values \u200b\u200bmust be integers, negative values \u200b\u200bare allowed. When used with letters (type \u003d "A" and type \u003d "a"), the number specified in the attribute value is the ordinal number of the letter in the alphabet. For example, start \u003d "4" will match the letter "D" and the list will start with it. When using the value start \u003d "27", the counter is reset to zero, and the list becomes two-digit ("27" \u003d "AA", "28" \u003d "AB", "29" \u003d "AC" ...).
      type	1 (default) A (large) a (lowercase) I (Roman large) i (roman small)	Determines the type of bullet used in building a numbered (ordered) list.

      Usage example

      1. First point Second point
      2. Third point

      It will look like this on the page:

      1. First point.
      2. Second point.
      3. Third point.

      If you want the list to start from a specific number (not from 1), then you must specify the start attribute for the tag

      .

      For example:

      Another interesting attribute is type, which allows you to specify alphabetic numbering ("A" - large, "a" - lowercase), or numbering from Roman numerals ("I" - in uppercase, "i" - in lowercase).

      Consider an example that shows all possible values \u200b\u200bfor the type attribute (other than the default):

      >
      1. First point Second point
      2. Third point
      >
      1. First point Second point
      2. Third point
      >
      1. First point Second point
      2. Third point
      >
      1. First point Second point
      2. Third point

      I draw your attention to the fact that it is allowed to form numbered (ordered) lists nested in other numbered lists (inside a list item

      3. ):
         1. First point
            1. First point Second point
            2. Third point
            Second point
            3. Third point

            It will look like this on the page.

            HTML lists are used to group related pieces of information together. There are three types of lists:

            bulleted list —

            - each element of the list
            • marked with a marker,
              numbered list —
              - each element of the list
              1. marked with a number,
                 definition list - - consists of term pairs
                 —
                 definition.

                 Each list is a container that contains list items or term-definition pairs. List items behave like block elements, stacking one under the other and taking up the entire width of the container block. Each list item has an additional box on the side, which is not involved in the layout.

                 Creating HTML Lists

                 1. Bulleted list

                 Bulleted list is an unordered list (from the English Unordered List)... Created using a paired tag

                 ... The marker of a list item is a label, for example, a filled circle.

                 Browsers add the following formatting to the list box by default:

                 Each list item is created using a pair tag

              2. (from the English List Item).
              available.
              • Microsoft
              • Google
              • Apple
              Figure: 1. Bulleted list

              2. Numbered list

              Numbered list is created using a paired tag. Each list item is also created using the element

            • ... The browser numbers the elements in order automatically, and if you delete one or more elements of such a list, the rest of the numbers will be automatically recalculated.

              The list box also has default browser styles:

            • the value attribute is available, which allows you to change the default number for the selected list item. For example, if for the first item in the list you set
            • , then the rest of the numbering will be recalculated relative to the new value.

              For tag

              the following attributes are available:
              Table 1. Tag Attributes

              Attribute	Description, accepted value
              reversed	The reversed attribute makes the list appear in reverse order (for example, 9, 8, 7 ...).
              start	The start attribute sets the initial value from which the numbering will start, for example, the construction the first item will be assigned a serial number "10". You can also specify the type of numbering at the same time, for example, .
              type	The type attribute specifies the kind of marker to use in the list (as letters or numbers). Accepted values: 1 - default value, decimal numbering. A - numbering the list in alphabetical order, capital letters (A, B, C, D). a - numbering the list in alphabetical order, lowercase letters (a, b, c, d). I - numbering in Roman capital numerals (I, II, III, IV). i - numbering in Roman lowercase digits (i, ii, iii, iv).

              1. Microsoft
              2. Google
              3. Apple
              Figure: 2. Numbered list

              3. List of definitions

              Definition lists are created using the tag

              ... The tag is used to add a term
              , and to insert a definition - tag
              .

              The definition list box has the following default browser styles:

              For tags

              ,

              and

              available.

              Producer:

              Petr Tochilin

              Cast:

              Andrey Gaidulyan

              Alexey Gavrilov

              Vitaly Gogunsky

              Mariya Kozhevnikova

              
              Figure: 3. List of definitions

              4. Nested list

              Often, the capabilities of simple lists are not enough, for example, when creating a table of contents, you cannot do without nested items... The markup for the nested list would be as follows:

              • Paragraph 1.
              • Point 2.
                • Subclause 2.1.
                • Subclause 2.2.
                  • Subclause 2.2.1.
                  • Subclause 2.2.2.
                • Subclause 2.3.
              • Point 3.

              
              Figure: 4. Nested list

              5. Multilevel numbered list

              A layered list is used to display list items at different levels with different indents. The markup for a multilevel numbered list would be as follows:

              1. paragraph
              2. paragraph
                 1. paragraph
                 2. paragraph
                 3. paragraph
                    1. paragraph
                    2. paragraph
                    3. paragraph
                 4. paragraph
              3. paragraph
              4. paragraph

              This default markup will create a new numbering starting with one for each nested list. To make nested numbering, you need to use the following properties:
              counter-reset resets one or more counters, setting a value to reset;
              counter-increment specifies the counter increment value, i.e. with what step each subsequent item will be numbered;
              content - the generated content, in this case it is responsible for displaying the number before each item in the list.

              Ol (/ * remove the standard numbering * / list-style: none; / * Identify the counter and give it a name li. The counter value is not specified - by default it is 0 * / counter-reset: li;) li: before (/ * We define the element to be numbered - li. The pseudo-element before specifies that the content inserted using the content property will be placed before the list items. It also sets the value of the counter increment (default is 1). * / Counter-increment: li; / * The content property displays the number of the list item.counts () means that the generated text is the value of all counters with that name.A quoted period adds a separating period between numbers, and a period with a space is added before the contents of each list item * / content: counters (li, ".") ".";)
              Figure: 5. Multilevel numbered list