Проблемы с левым полем, когда элементы ListItem обтекают плавающий блочный элемент

У меня есть элемент с плавающим блоком и неупорядоченный список элементов, обтекающих его. Поле listItems, кажется, перекрывает плавающий элемент.

Вот упрощенный пример:

<p>some text</p>
<div class="leftcaption">image with caption</div>
<p>some more text, now comes a list</p>
<ul>
    <li>Item (bad left margin)</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item (correct left margin after the caption div)</li>
</ul>

CSS:

* { margin:5px; }
ul {
    list-style-type:disc;
    margin-left:30px;
}
.leftcaption {
    float:left;
    margin: 5px 5px 5px 0;
    /* just to make it look like a real caption: */
    background-color: #DDD;
    width:100px;
    height:100px;
}

Вот как это выглядит:

Пример неправильного поля элемента списка

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


html css margin html-lists floating
person Louis Somers    schedule 26.01.2013    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Добавьте правило list-style-position:inside; в свой CSS.

пример jsFiddle

ul {
    list-style-type:disc;
    margin-left:30px;
    list-style-position:inside;
}
person j08691    schedule 26.01.2013
comment
Спасибо! Мне нужно было только установить отступ UL на 0, чтобы сделать его согласованным, но list-style-position исправила это :-) - person Louis Somers; 27.01.2013
comment
Вы сэкономили мне дополнительные 5 часов поиска и проверки других правил css. - person Muhammad Ahsan; 01.05.2013

arrow_upward
1
arrow_downward

Альтернативный способ, который также позволит вам добавить поле:

ul {
    margin-left:0; list-style-type:none;
}
ul li:before{
    content:"\00A0\25cf\00A0\00A0\00A0";
}

Решение, предоставленное @ j08691, вероятно, по-прежнему является лучшим вариантом, но левые поля и отступы должны быть установлены на 0, чтобы поддерживать постоянный интервал.

С помощью этого обходного пути можно вводить неразрывные пробелы как до, так и после диска.

person Louis Somers    schedule 26.01.2013