Output must be like the below given image enter image description here

But the output for my code is like the below given image: enter image description here

My code:

<span>
<b>cannot contain</b>
<li>The "@" or "<" symbols </li>
<li> your SkyMiles number, email or username</li>
<li> More than 3 special characters </li>
</span>

Except span tag changes can be made on any tag even new tags can be added below span tag.

CodePudding user response：

Use ul instead of span and keep the b tag out of ul

ul {
  padding: 0 10px;
  margin: 4px 4px;
  width: 200px;
}

<b>MUST BE</b>
<ul>
  <li>Between 8 and 20 characters</li>
  <li>At least 1 number</li>
  <li>At least 1 uppercase letter</li>
  <li>At least 1 lowercase letter</li>
</ul>
<br />
<b>CANNOT CONTAIN</b>
<ul>
  <li>The "@" or "
    < " symbols</li>
      <li>your SkyMiles number, email or username</li>
      <li>More than 3 special characters</li>
    </ul>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>