Плавающее изображение слева от ul игнорирует margin/padding

У меня есть абзац, за которым следует неупорядоченный список, содержащий несколько элементов списка. У меня также есть изображение, плавающее слева от него. Проблема, с которой я сталкиваюсь, заключается в том, что маркер/дополнение элемента списка перекрывается этим изображением.

Я хочу, чтобы пули, расположенные рядом с изображением, отступали так, как должны.

Вот тест, который я написал для отладки, где вы можете увидеть мою проблему в действии.

Все это внутри CMS, поэтому размеры изображения являются переменными, а также абзацами и возможными списками в тексте.

Любые решения?

(См. мой первый комментарий к фотографиям.)

Ответ 1

ul {
    overflow: auto;
}

У меня будет дополнительное преимущество: нет элементов списка, обтекающих изображение.

Ответ 2

Добавьте это:

ul{ list-style-position: inside}

Что это!

Ответ 3

Другим вариантом было бы перемещение списка вправо с относительным позиционированием:

img+p+ul {
    position: relative;
    left: 1em;
    top: 0;
}

Ответ 4

li style="margin-left: 135px;" Работала лучше для меня.

overflow: auto; выглядел нормально, но вступил в войну с другими элементами в HTML.

Ответ 5

Вы можете указать своим элементам списка свойство переполнения:

li {
    overflow: hidden;
}

Это приведет к тому, что элемент списка будет корректно вести себя: они будут отображаться как квадратный блок, продолжая, где заканчивается изображение, они не будут хорошо перемещаться влево. Следующий элемент списка будет.

Ответ 6

Если вы не беспокоитесь о добавлении javascript, вот jQuery script, который добавит маржу к ul, которая перекрывает изображение, чтобы все элементы списка оставались выровненными, а затем присваивает отрицательный запас li, который не перекрывается.

$(function(){
    //Define a context so we only move lists inside a specified parent
    var context = $("#test_div");    

    //Build a list of images position a size
    var imgRects = [];
    var imgs = $("img.left", context);
    imgs.each(function(i){
        var pos = $(this).position();
        pos.right = pos.left + $(this).outerWidth(true);
        pos.bottom = pos.top + $(this).outerHeight(true);
        imgRects.push(pos);        
    });

    //Process each li to see if it is at the same height of an image        
    var lis = $("li", context);
    lis.each(function(i){
        var li = $(this);
        if(li.parent().css('marginLeft') != "0px"){
            return; //Already moved
        }
        var top = li.position().top;
        for(var j in imgRects){
            var rect = imgRects[j];
            if(top > rect.top && top < rect.bottom){
                li.parent().css('marginLeft', rect.right);
                return;
            } else if(li.parent().css('marginLeft') != "0px"){
                li.css('marginLeft', -1 * rect.right);
            }
        }
    });
});

Я тестировал вашу демонстрационную страницу и jQuery 1.3.2, и она работает на FF3.5 и IE8, потому что изображение находится поверх документа. Если изображение появляется в середине ul, первые буквы li останутся заполненными. Если вам нужно исправить эту проблему, оставьте комментарий и попробуйте обновить script.