Как мне протянуть уль вокруг плавающего img - PullRequest
Новая
       1

Как мне протянуть уль вокруг плавающего img

3 голосов
/ 06 февраля 2012

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

Вот пример минимального случая. (также в 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>

Я ценю вашу помощь.

Ответы [ 2 ]

0 голосов
/ 06 февраля 2012

CSS: 

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


ul{
padding:0px;
list-style-type:none;
margin:0px;
}
0 голосов
/ 06 февраля 2012

Попробуйте это: 

/* 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;}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...