How to indent list items using CSS when you have floating blocks?

I observed a relative strange behavior when I use floating images in a d开发者_Python百科ocument. The list items indentation is made relatively to the 'red line' instead of the 'green' one.

Why is this happening and can I solve this?

<img style="float: left">
<p>some text</p>
<ul>
   <li>aaa</li
   <li>bbb</li
</ul>
<p>some other text</p>

Just add ul { list-style-position: inside; } because by default it is set to outside, not sure why.

I think you probably need to change the list style position to inside.

Combination answer of a few things I managed to dig up to make this work.

HTML:

<div>
    <img src="bleh.jpg">
    <ul>
        <li>This is a test of something with something to do something</li>
        <li>This is a test of something with something to do something</li>
        <li>This is a test of something with something to do something</li>
    </ul>
</div>

LESS:

img {
    float: left;
}

ul {
    list-style-position: inside;

    li {
        position: relative;
            left: 1em;
        margin-bottom: 1em; margin-left: -1em;
            padding-left: 1em;
        text-indent: -1em;
    }
}

This worked for me, from: http://enarion.net/news/2012/css-perfect-indented-line-ulli-around-a-floating-image/

Chrome, Firefox etc:

ul { list-style-position:inside; margin-left: 2px; display: table; }
ul li {margin-left: 13px; text-indent: -12px; }

Internet Explorer:

<!--[if IE]>
   <style>ul li {margin-left: 19px; text-indent: -18px; }</style>
<![endif]-->

On ul element you can use overflow: hidden; to make display more like a box than just a text, and padding-left: 1em; to push it from the left side.

.image {
  float: left;
  width: 50%;
  height: 200px;
  background-color: gray;
  margin-right: 20px;
  margin-bottom: 20px;
}

ul {
  padding-left: 1em;
  overflow: hidden;
}

<div class="image"></div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales sodales facilisis. Ut a risus vitae massa scelerisque elementum. Quisque finibus posuere tempus. Suspendisse rutrum quam faucibus, tincidunt neque vitae, porttitor urna.
</p>

<ul>
  <li>Nunc vulputate libero vel molestie dapibus.</li>
  <li>Proin pellentesque orci rutrum erat iaculis, eu porttitor lectus congue.</li>
  <li>Morbi neque arcu, congue posuere vestibulum ac, pulvinar nec lectus. Aenean nulla magna, elementum ut leo vel, tincidunt finibus enim. Aliquam pretium justo et lectus malesuada vestibulum at non tellus.</li>
  <li>Nunc vulputate libero vel molestie dapibus.</li>
  <li>Proin pellentesque orci rutrum erat iaculis, eu porttitor lectus congue.</li>
</ul>

<p>
Nunc vulputate libero vel molestie dapibus. Proin pellentesque orci rutrum erat iaculis, eu porttitor lectus congue. Curabitur ut tincidunt justo, nec mattis diam. Praesent suscipit scelerisque enim, at aliquet diam accumsan ut. Morbi neque arcu, congue posuere vestibulum ac, pulvinar nec lectus. Aenean nulla magna, elementum ut leo vel, tincidunt finibus enim. Aliquam pretium justo et lectus malesuada vestibulum at non tellus. Etiam vel libero scelerisque, bibendum massa sit amet, fringilla odio. Nam eu sem massa.
</p>