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

Question

please see html validator error output in screenshot.

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 ?

You transformed your code into something wrong because you have list-item elements inside inline element. — Temani Afif, Nov 28 '22 at 09:23
Your HTML is invalid to start with: https://validator.w3.org/ — Quentin, Nov 28 '22 at 09:29

score 1 · Answer 1 · answered Nov 28 '22 at 09:24

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.

score 1 · Accepted Answer · answered Nov 28 '22 at 09:26

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>

score 0 · Answer 3 · answered Nov 28 '22 at 09:27

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.

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

3 Answers3