Как изменить отступ слева от маркеров списка?
Задать произвольное расстояние между маркерами списка и текстом справа от него.
Решение
Добавьте свойство 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, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Отступ для списка
Подскажите пожалуйста, как можно прописать нижний внешний отступ для списка (с двух пунктов), если нет второго пункта, если он есть, то отступ не должен отображаться.
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
Добрый день! Помогите, в частности попробуйте понять, что именно хочу. Мне нужно сделать, с.
Табуляция в HTML: 4 способа сделать отступ
По умолчанию браузеры игнорируют последовательности из нескольких пробелов, учитывая только первый. Однако, в некоторых случаях есть необходимость сделать отступ в HTML документе.
Отдельного символа табуляции в HTML не существует, тем не менее, даже без специального кода или знака табуляции, есть много способов достичь нужного результата.
Основные способы сделать табуляцию
Способы сделать табуляцию в HTML:
- Используя CSS свойство margin-left .
- С помощью спецсимвола неразрывный пробел .
- Несколькими пробелами внутри тега .
- Задать блоку CSS свойство white-space и использовать пробелы.
Примеры. Табуляция в HTML
Способ 1: Делаем отступ, например, 50 пикселей от левого края с помощью свойства CSS margin-left .
Текст после табуляции.
Способ 2: Используем специальный символ HTML — неразрывный пробел. Каждый nbsp; равен одному пробелу и не будет игнорироваться браузером. Однако неразрывные пробелы не переносятся на следующую строку. Это следует учитывать, если табуляция делается как отступ внутри текста.
Текст после отступа.
Способ 3: Пишем текст внутри тега . По умолчанию, браузеры не игнорируют пробелы внутри этого тега. Подробнее в статье: Тег HTML предварительно отформатированный текст.
Способ 4: Меняем у блока правило учета пробелов через CSS свойство white-space .
Текст после отступа.
Каждый из этих способов будет работать. Какой больше подойдет в конкретном случае — решать вам. Мне в своей практике доводилось использовать все 4 способа табуляции, приведенные выше. Чаще всего использую CSS отступы и неразрывные пробелы.