What is the use of CSS display "list-item" if there is no display "list"?

Question

I'm looking to create a HTML list element with list items from div tags. I know there is display:list-item, but if I have this:

 <ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
 </ul>

to get this:

.item { display: list-item};
.list { display: block };

<div class="list">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

doesn't get me anywhere.

Question:
Is there a way to get the <ul> equivalent using <div> tags and why is there a display:list-item when display:list does not exist?

Thanks!

Answer 1

HTML list elements - such as <ol>, <ul>, <dl> - are block-level elements like <div> which is a generic block-level container.

The only difference is that UAs apply some padding, margin on that elements within the user-agent stylesheet. For instance Google Chrome applies the following to <ul> elements:

ul, menu, dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

As can be seen, there is padding at the right side of the <ul> which allows the markers (bullets) to be displayed beside each item (at the left). Otherwise they would stick out of the box and can not be seen.

Therefore, to fake the effect of <ul>, you'll end up with something like this:

.list {
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 40px;
}

Alternatively, we could change the position of markers to inside of the box by giving list-style-position: inside to the list items.

Answer 2

With list-item you are doing this:

The element generates a block box for the content and a separate list-item inline box

So you need to define the list-item, this property allows you to define another properties like this:

.list > div {
    display:list-item;
    list-style-type: disc;
    list-style-position: inside;
}

Check this Demo Fiddle

Note >>

If you want to define some kind of bullet type image I suggest the method of the answer of @Doctus but if you want some numeric let's go with this one and change asterisks by decimal

Answer 3

What you have will work fine. All you need to do is add a list-style property to the .list item.

E.g.

.item {
    display: list-item;
    list-style: disc inside;
}