why does display:inline in ul css tag causes elements to shift

November 28, 2022

ul{
    display: inline;
}

<ul>hi
    <li>
        1234
    </li>
    <li>
       5678
    </li>
 </ul>   
     
<ul>hello
    <li>
       abcdef
    </li>
    <li>
       ghijkl
    </li>
 </ul>

question:the ul items(hi,hello) in above css code moved a couple of places to the right if I used the css display:inline tag . But They do not get moved if I execute with a css ul tag having no display:inline value..please explain. and second question why have the circle markers disappeared ?

>Solution :

li elements have a display value equal to list-item and following the specification they generate a block box so you end having a block element inside and inline element.

The above behavior is also defined in the specification and leads to the result you get. More detail: Is it wrong to change a block element to inline with CSS if it contains another block element?

why have the circle markers disappeared ?

It’s still there but hidden on the left because the default behavior is list-style-position: outside

ul{
    display: inline;
}
li {
  margin-left: 20px;
}

<ul>hi
    <li>
        1234
    </li>
    <li>
       5678
    </li>
 </ul>   
     
<ul>hello
    <li>
       abcdef
    </li>
    <li>
       ghijkl
    </li>
 </ul>