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

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 ?

CodePudding user response：

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>

CodePudding user response：

ul gets a default padding-left applied from the user agent stylesheet, 40px or something.

With an inline element, padding-left works only before the first line of content, and padding-right only after the last line.

Make it inline-block instead, if you want that padding applied to the whole element.

CodePudding user response：

Because the inline value of the display property is something that makes the elements inside to behaves inline.

That means you have not much options to position and move them.

The inline value is most useful for a text paragraphs to wrap theentire paragraph. Where you would like the text to position in a couple of lines one below another.