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

【问题标题】：Floated image to left of a ul is ignoring margin/paddingul 左侧的浮动图像忽略边距/填充
【发布时间】：2010-11-13 14:08:26
【问题描述】：

我有一个段落，后跟一个无序列表，有几个列表项。我也有一个图像漂浮在它的左边。我遇到的问题是列表项边距/填充被该图像重叠。

我希望图像旁边的项目符号按应有的方式缩进。

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

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

有什么解决办法吗？

（图片见我的第一条评论。）

【问题讨论】：

基本上，我希望 tinyurl.com/ku7cck 看起来像 tinyurl.com/lph2hj
可能重复：stackoverflow.com/q/2759354/854922.

标签： css

【解决方案1】：

ul {
    overflow: auto;
}

我将获得额外的优势，即不让列表项环绕图像。

【讨论】：

【解决方案2】：

添加这个：

ul{ list-style-position: inside}

就是这样！

【讨论】：

我不想这样做，因为那样其他行不会与第一行的第一个字母左对齐。
这里似乎可以正常工作：jquery.nodnod.net/cases/580/run您是否使用过 CSS 重置？
他正在使用您的解决方案。如果您进入代码并将其中一个 li 的文本更长，您可以看到。（或者只看 CSS）。
糟糕，我错过了你的 HTML 演示，我刚刚看到了屏幕截图。我猜这个问题是因为你没有声明边距和填充。回到那天，在 CSS 重置很常见之前，我记得一个习惯用法，你总是为列表定义左边距和填充，以确保一致的项目符号位置。我以为它来自 ALA 文章，但快速搜索一无所获。无论如何，我建议使用某种形式的 CSS 重置，无论是 Eric Meyer 的出色 (meyerweb.com/eric/tools/css/reset) 还是简单的 *{margin:0;padding:0}
这是从我正在使用重置的完整开发网站中提取的部分。但是，我做了 *{margin:0;padding:0} 并没有帮助。

【解决方案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 脚本，它将向重叠图像的 ul 添加一个边距，以便所有列表项保持对齐，然后为没有的 li 分配一个负边距t 重叠。

$(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 将保持填充。如果您需要更正此问题，请发表评论并尝试更新脚本。

【讨论】：