Как сделать отступ для элементов списка с помощью CSS, когда у вас есть плавающие блоки?

Question

Я наблюдал довольно странное поведение при использовании плавающих изображений в документе.Отступ элементов списка сделан относительно «красной линии» вместо «зеленой».

Почему это происходит и можно ли это решить?

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

Answer 1

Просто добавьте ul { list-style-position: inside; }, потому что по умолчанию он установлен снаружи, не знаю почему.

Answer 2

Я думаю, вам, вероятно, нужно изменить позицию стиля списка на inside.

Answer 3

Комбинированный ответ на несколько вещей, которые мне удалось выкопать, чтобы сделать эту работу.

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>

МЕНЬШЕ:

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

Answer 4

Это сработало для меня: http://enarion.net/news/2012/css-perfect-indented-line-ulli-around-a-floating-image/

Chrome, Firefox и т. Д .:

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