ul, ol, li

EN RO Change Language

Designing Chaturbate Bios - <ul>

HTML Tag - Unordered list, Ordered list and List styles

The HTML <ul> tag defines an unordered (bulleted) list

The HTML <ol> tag defines an ordered (numbered) list

Use the <ul> or <ol> tag together with the <li> tag to create unordered list or ordered list.

On Chaturbate this HTML element is very important when editing a custom design because it can hold the entire layout.

TAG HTML MARKUP DEFINES
<ul> <ul>...</ul> HTML <ul> tag defines an unordered (bulleted) list
<ol> <ol>...</ol> HTML <ol> tag defines an ordered (numbered) list
<li> <li>...</li> HTML <li> tag defines a list item

HTML MARKUP

ul ol li - can be used in conjunction with inline css and can hold other block elements

HTML Markup Code:

<ul> - <li>

Basic markup

     <ul>
     <li>This is list style using ul, unordered list (bullets) type</li>
     <li>This is list style using ul, unordered list (bullets) type</li>
     <li>This is list style using ul, unordered list (bullets) type</li>
     </ul>

Will render:

  • This is list style using ul, unordered list (bullets) type
  • This is list style using ul, unordered list (bullets) type
  • This is list style using ul, unordered list (bullets) type

Extended markup


     <ul style="display:block;width:90%;height:auto;box-sizing:border-box;list-style:none;">
     <li>This is list style using ul, unordered list and bullet styles are removed</li>
     <li>This is list style using ul, unordered list and bullet styles are removed</li>
     <li>This is list style using ul, unordered list and bullet styles are removed</li>
     </ul>

Will render:

  • This is list style using ul, unordered list and bullet styles are removed
  • This is list style using ul, unordered list and bullet styles are removed
  • This is list style using ul, unordered list and bullet styles are removed

<ol> - <li>

Basic markup

     <ol>
     <li>This is list style using ol, ordered list (numbered) type</li>
     <li>This is list style using ol, ordered list (numbered) type</li>
     <li>This is list style using ol, ordered list (numbered) type</li>
     </ol>

Will render:

  1. This is list style using ol, ordered list (numbered) type
  2. This is list style using ol, ordered list (numbered) type
  3. This is list style using ol, ordered list (numbered) type

Extended markup


     <ol style="display:block;width:90%;height:auto;box-sizing:border-box;list-style:none;">
     <li>This is list style using ol, ordered list (numbered) type, numbers removed</li>
     <li>This is list style using ol, ordered list (numbered) type, numbers removed</li>
     <li>This is list style using ol, ordered list (numbered) type, numbers removed</li>
     </ol>

Will render:

  1. This is list style using ol, ordered list (numbered) type, numbers removed
  2. This is list style using ol, ordered list (numbered) type, numbers removed
  3. This is list style using ol, ordered list (numbered) type, numbers removed

Code Snippets

Test markup codes and see how your browser is rendering them. Use button to see how to use the source editor and rendering tool

Markup Code Box

Show delete Default -Default-

Default button, on click, removes the markup code from light-blue box

Render Box

That's how it looks rendered in browser. Optionally you can Save as PDF

Markup Codes using <ul>,<ol> , <li> HTML tag

Unordered (ul), Ordered (ol) and List (li) items tags can hold different types of content but keep in mind that there's a certain legacy between all HTML tags.

<ul> / <ol> / <li> tags and how to style them to look more appealing using inline-CSS

1. Basic html for <ul> / <ol> / <li> elements with some inline-css

      
      <ul style="display:block;width:70%;height:auto;background-color:#036;margin:10px auto 12px auto;padding:0;box-sizing:border-box;list-style:none;">
<li style="display:inline-block;width:33.33%;height:auto;box-sizing:border-box;list-style:none;background-color:#f1f1f1;color:#777;">List element using <ul> HTML tag</li>
</ul>

Show:

  • List element using <ul> HTML tag

2. Other styling using inline-css

<ul style="display:block;width:80%;height:auto;background-color:#036;margin:10px auto 12px auto;padding:5px;box-sizing:border-box;list-style:none;">
<li style="display:inline-block;width:30%;height:auto;padding:5px;margin:0 auto;box-sizing:border-box;list-style:none;background-color:#f1f1f1;color:#777;">List element using <ul> HTML tag</li>
<li style="display:inline-block;width:30%;height:auto;padding:5px;margin:0 auto;box-sizing:border-box;list-style:none;background-color:#222;color:#f1f1f1;">List element using <ul> HTML tag</li>
<li style="display:inline-block;width:30%;height:auto;padding:5px;margin:0 auto;box-sizing:border-box;list-style:none;background-color:#955;color:#fff;">List element using <ul> HTML tag</li>
</ul>

Show:

  • List element using <ul> HTML tag
  • List element using <ul> HTML tag
  • List element using <ul> HTML tag

3. Other styling using inline-css

<ul style="display:block;width:80%;height:auto;background-color:#036;margin:10px auto 12px auto;padding:5px;box-sizing:border-box;list-style:none;">
<li style="display:inline-block;width:30%;height:auto;padding:5px;margin:0 auto;box-sizing:border-box;list-style:none;background-color:#f1f1f1;color:#777;"><p style="display:block;width:80%;height:auto;margin:0 auto;padding:10px;text-align:center;background-color:#fff;text-transform:uppercase">List element using <ul> HTML tag</p></li>
<li style="display:inline-block;width:30%;height:auto;padding:5px;margin:0 auto;box-sizing:border-box;list-style:none;background-color:#222;color:#f1f1f1;"><a href="#" style="display:block;width:80%;height:auto;margin:0 auto;padding:10px;text-align:center;background-color:#fff;text-decoration:none;color:green;">List element using <ul> HTML tag</a></li>
<li style="display:inline-block;width:30%;height:auto;padding:5px;margin:0 auto;box-sizing:border-box;list-style:none;background-color:#955;color:#fff;"><img src="image-path/cdcoffee.png" style="display:block;width:50%;height:auto;margin:0 auto;"/></li>
</ul>

Show:

4. Using HTML markup with links inside and float

<ul style="display:block;width:80%;height:auto;margin:5px auto 12px 3px;float:none;clear:left;padding:0;box-sizing:border-box;list-style:none;background-color:#222;font-size:15px;"><li style="display:block;width:33.33%;height:auto;margin:0 auto;padding:0;text-align:center;box-sizing:border-box;list-style:none;float:left;"><a href="#" style="display:block;width:100%;height:auto;text-align:center;padding:8px 0 8px;color:#fff;text-decoration:none;background-color:#3ebace;">Follow on Twitter</a></li><li style="display:block;width:33.33%;height:auto;margin:0 auto;padding:0;text-align:center;box-sizing:border-box;list-style:none;float:left;"><a href="#" style="display:block;width:100%;height:auto;text-align:center;padding:8px 0 8px;color:#fff;text-decoration:none;background-color:#3374af;">I'm on Facebook</a></li><li style="display:block;width:33.33%;height:auto;margin:0 auto;padding:0;text-align:center;box-sizing:border-box;list-style:none;float:left;"><a href="#" style="display:block;width:100%;height:auto;text-align:center;padding:8px 0 8px;color:#fff;text-decoration:none;background-color:#ffc107;">Amazon Wishlist</a></li><li style="display:block;width:100%;height:0px;margin:0 auto;padding:0;text-align:center;box-sizing:border-box;list-style:none;float:none;clear:left;opacity:0;overflow:hidden;">divider to fix the float</li></ul>

Show:

As mentioned above, there's a legacy and a certain structure between markup codes, from parent to child. In this case the parent element is the <ul> main wrapper, <li> as block and the child element is the link.

5. A combination of HTML elements wrapped up in <ul> tag

<ul style="display:block; width:70%;height:auto;margin:10px auto 12px auto;float:none;clear:left;padding:0 0 13px;background-color:#000;box-sizing:border-box;list-style:none;"><li style="display:block;width:100%;height:auto;margin:0 auto 12px auto;float:none;clear:left;padding:0;box-sizing:border-box;list-style:none;text-align:center;"><img src="image-path/cgc.jpg" style="display:block;width:100%;height:auto;margin:0 auto;"/></li><li style="display:block;width:90%;height:auto;margin:0 auto 12px auto;float:none;clear:left;padding:10px;box-sizing:border-box;list-style:none;text-align:center;"><ul style="display:block;width:100%;height:auto;margin:0 auto;float:none;clear:left;padding:0;box-sizing:border-box;list-style:none;text-align:center;"><li style="display:block;width:43%;height:auto;margin:0 auto;float:left;padding:15px;box-sizing:border-box;list-style:none;text-align:center;background-color:#f1f1f1;"><p style="display:block;width:80%;height:auto;margin:0 auto;float:none;clear:left;font-size:19px;color:#777;line-height:normal;">Box Left</p><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;padding:5px;color:#999;font-size:15px;text-align:left;">Paragraph element content box left</p><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;padding:5px;color:#999;font-size:15px;text-align:left;">Paragraph element content box left</p><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;padding:5px;color:#999;font-size:15px;text-align:left;">Paragraph element content box left</p><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;padding:5px;color:#999;font-size:15px;text-align:left;">Paragraph element content box left</p><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;padding:5px;color:#999;font-size:15px;text-align:left;">Paragraph element content box left</p><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;padding:5px;color:#999;font-size:15px;text-align:left;">Paragraph element content box left</p><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;padding:5px;color:#999;font-size:15px;text-align:left;">Paragraph element content box left</p></li><li style="display:block;width:43%;height:auto;margin:0 auto;float:left;padding:15px;box-sizing:border-box;list-style:none;text-align:center;background-color:#f1f1f1;"><p style="display:block;width:80%;height:auto;margin:0 auto;float:none;clear:left;font-size:19px;color:#777;line-height:normal;">Box Right</p><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;padding:5px;color:#999;font-size:15px;text-align:left;">Paragraph element content box right</p><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;padding:5px;color:#999;font-size:15px;text-align:left;">Paragraph element content box right</p><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;padding:5px;color:#999;font-size:15px;text-align:left;">Paragraph element content box right</p><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;padding:5px;color:#999;font-size:15px;text-align:left;">Paragraph element content box right</p><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;padding:5px;color:#999;font-size:15px;text-align:left;">Paragraph element content box right</p><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;padding:5px;color:#999;font-size:15px;text-align:left;">Paragraph element content box right</p><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;padding:5px;color:#999;font-size:15px;text-align:left;">Paragraph element content box right</p></li><li style="display:block;width:100%;height:0px;margin:0 auto;padding:0;text-align:center;box-sizing:border-box;list-style:none;float:none;clear:left;opacity:0;overflow:hidden;">divider to fix the float</li></ul></li>
        <li style="display:block;width:80%;height:auto;margin:0 auto;padding:15px;text-align:center;box-sizing:border-box;list-style:none;float:none;clear:left;"><p style="display:block;width:90%;height:auto;margin:0 auto;float:none;clear:left;padding:5px;color:#f1f1f1;font-size:18px;text-align:center;">Paragraph element content box center</p></li>
        </ul>

Show:

    • Box Left

      Paragraph element content box left

      Paragraph element content box left

      Paragraph element content box left

      Paragraph element content box left

      Paragraph element content box left

      Paragraph element content box left

      Paragraph element content box left

    • Box Right

      Paragraph element content box right

      Paragraph element content box right

      Paragraph element content box right

      Paragraph element content box right

      Paragraph element content box right

      Paragraph element content box right

      Paragraph element content box right

    • divider to fix the float

  • Paragraph element content box center

The above snippet/example is using <ul> tag as main wrapper, basically it holds all other content.

Structure legacy, <ul> followed by <li> element and <p> tag. Parent elements are the ones which hold other HTML tags inside.

The use of float:left attribute is a bit tricky on Chaturbate reason for which, we need to add a fix, so the boxes (Box Left and Box Right) will not overlap the parent element

<li style="display:block;width:100%;height:0px;margin:0 auto;padding:0;text-align:center;box-sizing:border-box;list-style:none;float:none;clear:left;opacity:0;overflow:hidden;">divider to fix the float</li>

Inline-css can be added to:

Editing Tips

Our suggestions for fast editing and viable markup rendering

1. A very important factor in HTML markup editing is the structure of the markup so keep in mind about HTML structure legacy, parent HTML tag, child HTML element.
2. Use of target="_ ". All links (on page or external URLs) are set up to open on another page (with a countdown) so there's no need to use target="_ "
Twitter Facebook YouTube Reddit

Available Advertising Space. Contact us and rent this space for your banner or textual ad.

contact

Available Advertising Space. Contact us and rent this space for your banner or textual ad.

contact

Available Advertising Space. Contact us and rent this space for your banner or textual ad.

contact

CGC Tools and Services

CGC Stats and Staff

Why CGC

Because it is one service you can rely on. Because it's unique and flexible.
Because over +17k registered members, studio owners, web cam performers, affiliates and web designers can't be wrong.

CAMGIRL CLOUD