Make div inside li with list-style-position: inside appear to the right of number-CodePudding

This looks like a very simple thing, but I just could not find a solution online. I want to make the div appear to the right of the number while keeping the number inside li.

ol {
  list-style-position: inside;
}

li {
  border: 1px dashed green;
}

<ol>
<li>
  <div>
  !!!text text text text text text text text text text text text text text text text text text
  </div>
</li>
</ol>

CodePudding user response：

The div tag is a block element, You should use a span element instead, which is inline.

ol {
  list-style-position: inside;
}

li {
  border: 1px dashed green;
}

<ol>
<li>
  <span>
  !!!text text text text text text text text text text text text text text text text text text
  </span>
</li>
</ol>

If you really want to use div, add style="display: inline"

ol {
  list-style-position: inside;
}

li {
  border: 1px dashed green;
}
   div{
display: inline;
}

<ol>
<li>
  <div>
  !!!text text text text text text text text text text text text text text text text text text
  </div>
</li>
</ol>

CodePudding user response：

To align text after the number either use the span tag as it is an inline container in html else define the display inline property with div to align the text after the number

<ol>
<li>
  <span>
  !!!text text text text text text text text text text text text text text text text text text
  </span>
</li>
</ol>

CodePudding user response：

you can also set the inside div display to contents

display: contents