Как я могу выровнять свои маркированные изображения с моим <li>контентом?

Question

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

Большое спасибо 'over-flowers' ...

http://dl.getdropbox.com/u/240752/list-example.gif

Answer 1

Ну, немного кода CSS, чтобы увидеть, как вы в настоящее время устанавливаете свои маркированные изображения, было бы полезно; -)

Вместо фактической установки свойства list-style-image, я получил гораздо более согласованные результаты с настройкой свойства background-image для элемента li. Затем вы можете управлять позиционированием с точностью до пикселя. Не забудьте установить подходящее левое отступное значение для удаления содержимого элемента списка из изображения маркера.

Answer 2

Мне нравится ответ @ Брин. Один пример, который я успешно использовал:

#content ul li {
    margin: 3px -20px 3px 20px;
    padding: 0 0 0 0;
    list-style: none;
    background: url(newbullet.gif) no-repeat 0 3px;
}

Отрицательное правое поле может или не может быть необходимо в вашем случае. Возможно, вам придется настроить для удовлетворения ваших конкретных потребностей в зависимости от вашего изображения. (Мое изображение 14 х 15.) Вы должны специально установить поля и , если хотите, чтобы браузеры выглядели одинаково, поскольку Firefox и IE используют разные значения по умолчанию для отображения маркеров.

Answer 3

используйте background-image, для ваших элементов li добавьте отступы.

.box li{
    padding-left: 20px;
    background-image: url("img/list_icon.jpg");
    background-repeat: no-repeat;
    background-position: 0px 2px;
    margin-top: 6px;
}

Answer 4

Вы можете использовать что-то вроде этого в вашем CSS ...

#content li{

    list-style-image: url(../images/bullet.gif);

}