Как изменить отступ слева от маркеров списка?
Задать произвольное расстояние между маркерами списка и текстом справа от него.
Решение
Добавьте свойство margin-left к селектору UL или OL , соответственно, для маркированного или нумерованного списка. Браузер Firefox, Safari и Chrome одновременно с отступами добавляет к списку поля (свойство padding ), поэтому для одинакового отображения списка в разных браузерах необходимо обнулить значение padding , как показано в примере 1.
Пример 1. Отступ слева от списка
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Список сдвинут влево от своего исходного положения
Значение margin-left подбирается экспериментально исходя из собственных предпочтений. Допускается также использовать отрицательную величину, только учтите, что маркеры и текст могут при этом «уехать» за край окна браузера.
Списки
Сделать горизонтальное меню, пункты которого имеют произвольный наклон (рис. 1).
Рис. 1. Вид меню с наклонными пунктами
Как сделать вложенный список?
-
, а вложенный список вставляется внутрь одного из тегов
.
Как разместить элементы списка горизонтально?
Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для построения различных меню. В таком случае к селектору LI следует добавить стилевое свойство display со значением inline , оно преобразует блочный элемент во встроенный.
Как изменить цвет текста в списке?
Используйте стилевое свойство color для задания цвета текста и background для указания цвета фона, добавляя их к селектору UL или OL .
Как убрать отступ сверху и снизу от списка?
Используйте стилевое свойство margin-top (отступ сверху) и margin-bottom (отступ снизу) для селектора UL или OL , в зависимости от типа списка. Также можно воспользоваться универсальным свойством margin .
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как задать расстояние между пунктами списка?
Второй способ следующий — для селектора li добавляем свойство line-height, значение в виде дробного числа подбираем самостоятельно. В примере 2 используется значение 1.8.
Пример 2. Использование line-height
- создание пунктуальности (никогда не будете никуда опаздывать);
- излечение от пунктуальности (никогда никуда не будете торопиться);
- изменение восприятия времени и часов.
Этот способ менее универсален, поскольку line-height воздействует на все строки. Вид списка зависит от переносов строк; если переносов нет, то мы получим результат, показанный на рис. 2. Если в тексте имеются переносы, то получим результат как на рис. 3.
Рис. 2. Межстрочное расстояние
Рис. 3. Межстрочное расстояние при переносе строк
См. также
- line-height
- line-height в CSS
- margin-bottom
- Атрибут bottommargin
Отступ для списка
Подскажите пожалуйста, как можно прописать нижний внешний отступ для списка (с двух пунктов), если нет второго пункта, если он есть, то отступ не должен отображаться.
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Задать отступ для выпадающего списка
Добрый день. Есть меню вида, выводится он массивом PHP. Скажите могу ли я каким нибудь образом.
Как сделать отступ для маркированного списка?
Хоть у меня и стоит ВордПресс, то все равно решил сюда написать. В общем такая проблема, что.
Отступ списка от рисунка слева
Проблема заключается в том, что когда вставляется картинка пропадает отступ списков, т.е. вот.
Вёрстка списка товаров, убрать отступ сверху и по краям
Как осуществить правильно вёрстку списка товаров чтобы не было отступов которые отметил красным, по.
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
Попробуйте вот так.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
html lang="en"> head> meta charset="UTF-8"> title>Document/title> style> * < margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; list-style-type: none; >ul < padding: 10px; margin: 10px; border: 1px solid #ccc; >li < margin-bottom: 20px; >li:last-child < margin-bottom: 0; font-weight: bold; >/style> /head> body> ul> li>Первый/li> li>Второй/li> /ul> /body> /html>
Регистрация: 27.03.2013
Сообщений: 84
из-за того что для li прописан background, отступ увеличивает размер li (прикрепил скриншот).
Может быть универсальней было бы сделать верхний отступ для блока, который идет после списка? (если нет пунктов 2,3, то отступ прописывается, если есть, то нет)
1 2 3 4 5 6 7 8 9 10 11
aside> div> ul> li>пункт 1/li> li>пункт 2/li> li>пункт 3/li> /ul> /div> /aside> div>p>Текст/p>/div>
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
Не могу понять что вам нужно. Попробуйте точнее формулировать свой вопрос. Либо же выложите свой код и укажите на ошибку)
Регистрация: 27.03.2013
Сообщений: 84
Есть два блока, первый «блок-список», в нем в зависимости от материала бывает три пункта, два или один. Мне нужно, чтобы появлялся нижний отступ после первого блока, если в нем всего один пункт. То есть, чтобы между двумя блоками был отступ, когда в первом блоке всего один пункт.
Также, устроит вариант, если будет прописываться верхний отступ для блока, который идет после «блока-списка» (когда в блоке-списке всего один пункт)
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
Сообщение от cenationn 
Мне нужно, чтобы появлялся нижний отступ после первого блока
Это только средствами js. Суть в том, что бы считать количество элементов в одном блоке и присваивать класс другому блоку (родителю) при условии что пунктов 1-ин.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Как задать отступ в тексте элемента нумерованного или маркерованного списка
Помогите пожалуйста! Как задать отступ в тексте элемента нумерованного или маркерованного списка.
Отступ для красной строки для определенного DIV
Добрый день! Помогите, в частности попробуйте понять, что именно хочу. Мне нужно сделать, с.