Фоновое изображение элемента списка - Соседство с плавающим содержимым перекрывается

Question

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

По сути, у меня плавающее IMG слева от неупорядоченного списка. Фоновые изображения маркера устанавливаются в верхнем левом углу каждого LI. Тем не менее, плавающее изображение покрывает маркеры, так как браузер обрабатывает список так, как будто он все еще имеет полную ширину (как будто плавающее изображение почти отсутствует).

Это немного сложно объяснить. Итак, вот скриншот с заметками. http://img695.imageshack.us/img695/1328/cssquestion.jpg

Вот некоторые фрагменты кода (извините, на данный момент не могу загрузить на сервер):

<h2>About Us</h2>
            <img src="image.jpg" class="img-left" />
            <h3>Heading</h3>
            <p>Text</p>

            <ul>
                <li>List Item One</li>
                <li>List Item Two</li>
                <li>List Item Three</li>
            </ul>



    ul {
padding: 0; 
margin: 0;
}
    ul li {
background: url(../images/bg-main-bullet.gif) top left no-repeat; 
list-style: none; 
padding: 0; 
margin: 0;
}

.img-left {float: left; margin: 0 19px 0 0;}

У кого-нибудь есть идеи, как достичь желаемого результата?

Любые советы или пожелания приветствуются! Спасибо

Answer 1

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

Так что, если у вас плавающее изображение шириной 300px, вам нужно сделать:

ul { float: left; }

или ...

ul { padding-left: 300px; }

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

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

Answer 2

Позиция стиля по умолчанию для списков «снаружи», что означает, что они появляются за пределами соответствующего отступа или поля.Предположительно, у вас есть какое-то поле или отступы в списке или элементах списка, проталкивающие их за правую сторону графического элемента.

Исправление состоит в том, чтобы установить позицию стиля списка «внутри».Попробуйте добавить это в свою таблицу стилей (настройте специфичность ul в соответствии со своими потребностями):

ul{ list-style-position: inside; }