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 document. 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>

回答1:

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

回答2:

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

回答3:

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;
    }
}

回答4:

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]-->

来源：https://stackoverflow.com/questions/3797713/how-to-indent-list-items-using-css-when-you-have-floating-blocks