Question

我有一个段落后跟一个无序列表，有几个列表项。我的左边还有一张图像浮动。我遇到的问题是列表项边距/填充与该图像重叠。

我希望图像旁边的项目符号按照它应该缩进。

Here is a test我写了调试，你可以在那里看到我的问题。

所有这些都在CMS内部，因此图像尺寸是可变的，以及文本中的段落和可能的列表。

任何解决方案？

（请参阅我对图片的第一条评论。）

Answer 1

ul {
    overflow: auto;
}

我还有一个额外的好处，就是不要让列表项包裹在图像周围。

Answer 2

添加：

ul{ list-style-position: inside}

就是这样！

Answer 3

另一种选择是通过相对定位将列表向右移动：

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

Answer 4

li style="margin-left: 135px;"最适合我。

overflow: auto;在前面看起来很好，但在我的HTML中弄乱了其他元素。

Answer 5

您可以为列表项提供溢出属性：

li {
    overflow: hidden;
}

这将导致列表项的行为正确：它们将显示为方块，继续图像结束的位置，它们不会很好地向左流动。下一个列表项将会。

Answer 6

如果你不打算添加javascript，这里有一个jQuery脚本，它会在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将保持填充状态。如果您需要更正此问题，请发表评论并尝试更新脚本。

ul左侧的浮动图像忽略边距/填充

6 个答案: