Question

我有一个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>

感谢您的帮助。

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

Answer 2

的CSS：

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


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

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

2 个答案: