css маркеры списка



Маркеры списка css

Автор ЖуЖуЖу задал вопрос в разделе Другие языки и технологии

Как разместить маркер списка в html/css ближе к тексту списка? и получил лучший ответ

Ответ от Photozoom[мастер]
Добавьте свойство margin-left к селектору UL или OL, соответственно, для маркированного или нумерованного списка. Браузер Firefox, Safari и Chrome одновременно с отступами добавляет к списку поля (свойство padding), поэтому для одинакового отображения списка в разных браузерах необходимо обнулить значение padding.
Пример . Отступ слева от списка
HTML5CSS 2.1IE 9Cr 16Op 11Sa 5Fx 10
<html>
<head>
<meta>
<title>Отступ слева</title>
<style>
ul {
padding: 0; /* Убираем поля */
margin-left: 20px; /* Отступ слева */
}
</style>
</head>
<body>
<hr>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
<hr>
</body>
</html>
Значение margin-left подбирается экспериментально исходя из собственных предпочтений. Допускается также использовать отрицательную величину, только учтите, что маркеры и текст могут при этом «уехать» за край окна браузера.
Источник: http://htmlbook.ru/faq/kak-izmenit-otstup-sleva-ot-markerov-spiska

Ответ от Николай Филатов[новичек]
убрать исходный маркер и поставить свой через фоновый рисунок например.
отступ от стандартного маркера можно только увеличить, но не уменьшить.

Ответ от Arsen kopronyan[гуру]
К предыдущему ответу добавлю: можно не через фоновый рисунок, а через псевдоэлемент :before - тогда можно даже без рисунка, использовав соответствующий символ.

Ответ от Arckady@mail.ru[гуру]
Поскольку нет нормального ответа до сих пор отвечу через 3 года.
ul {
list-style-position: outside(со значением inside не работает);
margin-left: 15px(подбирается на месте);
}
li {
padding-left: 0px(минимальное возможное значение);
}

Ответ от 22 ответа[гуру]
Привет! Вот подборка тем с похожими вопросами и ответами на Ваш вопрос: Как разместить маркер списка в html/css ближе к тексту списка?
 

Ответить на вопрос:

Имя*

E-mail:*

Текст ответа:*
Проверочный код(введите 22):*