Перевод: Всеволод Козлов
Наша цель: сделать так, чтобы маркер списка не портил дизайн так, как показано на рисунке ниже.
Решение проблемы (важные моменты выделены жирным):
.box ul { }
.box li {
list-style: square;
margin-left: 15px;
color: #2D343F;
}
Однако, лучшим решением было бы использование «inside» свойства css list-style-position:
.box ul { }
.box li {
list-style: square;
list-style-position: inside;
color: #2D343F;
}
или так:
.box ul { }
.box li {
list-style: square inside;
color: #2D343F;
}
Смотрим результат на скриншоте ниже! Проблема решена!
Надеюсь, что помог Вам!
Оригинал статьи: CSS list-style-position Property
Смотрите также:
- Ajax скрипты
- Вкладки css
- День рождения
- Сайт портфолио
- Footer
- Перекодирование цвета из hex
- Оптимизация изображений
- Сборник иконок для рабочего стола
- Красивые таблицы css
- Семантическая разметка
9 комментария(-ев)
Использование list-style-position: inside; при многострочных пукнтах списков не самое лучшее решение.
Коллеги, для решения проблемы с моногстрочным комментарием можно проапгрэйдить финальное решение следующим образом:
- добавляем arrow как бэкграунд к li (no-repeat и top)
- добавляем отступы padding к li
- обнуляем padding и margin у ul
Павел, я с вами полностью согласен )
А все ли популярные браузеры поддерживают свойство?
list-style-position: inside;
В посте об этом не сказано.
Нгуен Павел, все.
Ну если уж список используется для оформления меню, то почему бы не присвоить background причем выравнивая с помощью em? Тогда даже при увеличении размера шрифта список не расползется.
О чем базар?
Павел пра на все 100%
Очередной баян короче!!!
Пишеться статья, а потом в коментах решение моно искать лутше чем в статье=)))))))))))))))
Может просто создаш форум =))))))))))))
Ржунимагу
Мдаа, так бывает.
Спасибо за материал и комменты))
Вообще, если статья порождает много комментов, то это плюс автору.