如何在浮动的 img 周围流动 ul答案

【问题标题】：How do I flow a ul around a floated img如何在浮动的 img 周围流动 ul
【发布时间】：2012-05-12 00:23:24
【问题描述】：

我有一个向左浮动的 img，然后是一个长的 ul，它应该呈现在 img 的右侧，然后在它下方继续。它会这样做，但是 img 旁边的 ul 部分全部左对齐并失去缩进。

这是一个最小的例子。（也在jsbin）

<html>
<head>
</head>
<body>
    <div style="float:left"><img src="http://i410.photobucket.com/albums/pp190/FindStuff2/Photography/Winter/winter.jpg" width="200" height="150" /></div>
    <ul>
        <li>Level 1</li>
        <li>Level 1</li>
        <li>
            <ul>
                <li>Level 2</li>
                <li>Level 2</li>
                <li>Level 2</li>
                <li>Level 2</li>
            </ul>
        </li>

        <li>Level 1</li>
        <li>Level 1</li>
        <li>Level 1</li>
        <li>Level 1</li>
    </ul>
    <div style="clear:both"><!-- --></div>
    More content More content More content More content More content More content More content More content More content More content More content 
</body>
</html>

感谢您的帮助。

【问题讨论】：

什么网址？我希望 ul 在图像周围流动，并使用适当的缩进进行渲染。
您的缩进实际上是存在的，但它是根据正文计算的 - 浮动图像 div 覆盖了嵌套 ul 上的边距/填充。我一直在寻找这个问题的解决方案很长一段时间，但似乎找不到。浮动元素后面的内容可以是背景图像、填充或边距。这是一个测试用例 - 我在 SO 上发布了一个，但一年多来没有找到解决方案，除了 JS easwee.net/floated_img_article 。
这是问题：stackoverflow.com/questions/2456137/…

标签： html css css-float

【解决方案1】：

试试这个：

/* add some margin-right for some white space between the list and image */
div {margin-right:12px; float:left;}

/* add overflow and set the list-style attributes */
li {overflow:hidden; list-style:inside square none;}

【讨论】：

你摇滚派对，派对摇滚！

【解决方案2】：

css:

div {margin:0 10px 5px 0; float:left;}


ul{
padding:0px;
list-style-type:none;
margin:0px;
}

【讨论】：