Как задать расстояние между пунктами списка?
Второй способ следующий — для селектора li добавляем свойство line-height, значение в виде дробного числа подбираем самостоятельно. В примере 2 используется значение 1.8.
Пример 2. Использование line-height
- создание пунктуальности (никогда не будете никуда опаздывать);
- излечение от пунктуальности (никогда никуда не будете торопиться);
- изменение восприятия времени и часов.
Этот способ менее универсален, поскольку line-height воздействует на все строки. Вид списка зависит от переносов строк; если переносов нет, то мы получим результат, показанный на рис. 2. Если в тексте имеются переносы, то получим результат как на рис. 3.
Рис. 2. Межстрочное расстояние
Рис. 3. Межстрочное расстояние при переносе строк
См. также
- line-height
- line-height в CSS
- margin-bottom
- Атрибут bottommargin
Списки
Сделать горизонтальное меню, пункты которого имеют произвольный наклон (рис. 1).
Рис. 1. Вид меню с наклонными пунктами
Как сделать вложенный список?
-
, а вложенный список вставляется внутрь одного из тегов
.
Как разместить элементы списка горизонтально?
Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для построения различных меню. В таком случае к селектору LI следует добавить стилевое свойство display со значением inline , оно преобразует блочный элемент во встроенный.
Как изменить цвет текста в списке?
Используйте стилевое свойство color для задания цвета текста и background для указания цвета фона, добавляя их к селектору UL или OL .
Как убрать отступ сверху и снизу от списка?
Используйте стилевое свойство margin-top (отступ сверху) и margin-bottom (отступ снизу) для селектора UL или OL , в зависимости от типа списка. Также можно воспользоваться универсальным свойством margin .
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как сделать внутренний отступ маркера от списка?
Есть список, там нужно увеличить расстояние от маркера до пункта. Не могу понять, как это сделать. По дефолту list-style-position: outside и я всегда увеличивал расстояние через padding . Но здесь принципиально важно сделать list-style-position: inside . padding тогда не работает. Не могу понять, как сделать это Упрощённый кусок кода:
Отслеживать
1,767 2 2 золотых знака 5 5 серебряных знаков 17 17 бронзовых знаков
задан 26 янв в 6:27
Dark Space Dark Space
641 2 2 серебряных знака 15 15 бронзовых знаков
Уберите стандартный маркер. А пунктам сделайте псевдоэлементы. Толкаете пункты пэддингом сколько нужно, а маркеры-псевдоэлементы ставите через left
26 янв в 6:31
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Вот как бы это реализовал я:
li < background-color: pink; list-style-position: inside; list-style: none; position: relative; --marker-size: 5px; --gap-right: 5px; --gap-left: 5px; padding-left: calc(var(--marker-size) * 2 + var(--gap-right) + var(--gap-left)); >li::before < content: ''; width: var(--marker-size); height: var(--marker-size); background-color: rgb(0, 0, 0); display: inline-block; border-radius: 50%; position: absolute; top: calc(50% - calc(var(--marker-size) / 2)); left: calc(var(--marker-size) / 2 + var(--gap-left)); >Как поменять размер маркера?
За это отвечает пропорция —marker-size , там вы указываете размер маркера, а уже сами стили правильно располагают его.
Как мне регулировать расстояние между маркером и пунктом?
Чтобы регулировать расстояние между маркером и пунктом нужно изменять пропорцию —gap-right , она отвечает за расстояние которое добавляется с правой стороны.
Чтобы отрегулировать расстояние слева, меняйте пропорцию —gap-left , она отвечает за расстояние которое добавляется с левой стороны.
Табуляция в 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 отступы и неразрывные пробелы.