Search code examples
htmlcss

Why does <UL> go into the floating image area?

Why does <UL> go into the floating image area? Here's an example https://codepen.io/vlad-tarasoffka/pen/xxevdwJ

margin-left or padding-left on <UL> or <LI> both give no result needed. Even when put <UL> in <DIV> it doesn't show correctly.

Solution

  • By default the list bullets/numbers are placed outside of the list. All you have to do is to use list-style-position: inside; on the list:

    img {
  float: left;
  margin: 0.5em;
}

ul {
  list-style-position: inside;
}
    <img src="https://via.placeholder.com/200.jpg">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>