Увеличить расстояние от маркера до текста
Меню
Наши новости
Учебник CSS
Невозможно отучить людей изучать самые ненужные предметы.
Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3
Надо знать обо всем понемножку, но все о немногом.
Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы
Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить — становится деканом. (Т. Мартин)
Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода
Самоучитель CSS
Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5
Новости
Блог для вебмастеров
Новости мира Интернет
Ремонт и советы
Все новости
Справочник CSS
Справочник от А до Я
HTML, CSS, JavaScript
Афоризмы
Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы
Видео уроки
Разместить статью у нас на сайте.
Популярные статьи
Наш опрос
| Помогли мы вам |
Наши новости
РЕКЛАМА
26-03-2016, 17:12
Увеличить расстояние от маркера до текста — «Маркированный список»
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Изменить в маркированном списке расстояние между маркером и текстом после него.
Решение
Для изменения расстояния между маркером списка и текстом используйте свойство padding-left для селектора LI, как показано в примере 1.Пример 1. Отступ от маркера до текста
HTML5CSS 2.
1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Расстояние между маркером и текстом</title>
<style>
li {
padding-left: 20px; /* Отступ от маркера до текста */
}
</style>
</head>
<body>
<hr>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
<hr>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Расстояние в 20 пикселов между маркерами и текстом списка
Отрицательное значение для padding-left использовать нельзя, поэтому минимальное задаваемое расстояние равно нулю. Но даже в этом случае небольшой исходный промежуток между маркером и текстом останется.
Указанное решение не работает, если для списка задано свойство list-style-position со значением inside.
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Еще новости по теме:
Другие новости по теме:
Комментарии для сайта CackleШпаргалка по синтаксису Markdown: 10 популярных тегов
Опубликовано:
Изменено:
Время чтения: 5 минут
63 959
В последнее время все большую популярность приобретает Markdown — облегченный язык разметки (
wiki).
И не удивительно. С одной стороны, для его использования не нужно изучать толстые книги и тратить кучу времени для «набивания руки» и знакомством с техническими особенностями. Это привлекает людей, далеких от IT сферы: писателей, дизайнеров и др. С другой стороны, использование Markdown значительно ускоряет разработку, поэтому его выбирают те, чья профессия связана с разработкой для веб. Сегодня его широко используется в написании статей, документации (в том числе на github), справочных текстов и др.
1. Заголовки
Для того чтобы написать HTML заголовок в Markdown, необходимо использовать знак # (хэш). Если необходимо несколько уровней заголовков, h2 — h6, нужно изменить количество хэшей (#) перед текстом заголовка.
# Заголовок 1 ## Заголовок 2 ### Заголовок 3 #### Заголовок 4 ##### Заголовок 5 ###### Заголовок 6
2.
Списки
Markdown поддерживает оба вида списков. Для организации маркерованного списка используются знаки *, + и -. От них зависит вид маркеров. Чтоб сделать многоуровневый список, нужно будет сделать отступы (4 или 8 пробелов).
* Элемент списка 1
* Элемент списка 2
+ Элемент второго уровня списка 1
+ Элемент второго уровня списка 2
- Элемент третьего уровня списка 1
- Элемент третьего уровня списка 2
- Элемент третьего уровня списка 3
С нумерованными списками все еще проще:
1. Номер 1 2. Номер 2 3. Номер 3
3. Горизонтальные разделители
В HTML мы используем тег <hr \>, в Markdown для этого служат три или более дефиса, звездочки или знака равно (-, *, =).
Текст 1 ********* Текст 2 ====
4. Параграфы
Для оформления абзацев в html используются теги
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eius in labore quidem, sequi suscipit! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aut commodi debitis ipsam nobis perspiciatis sequi, sint unde vitae.
5. Курсивное и жирное выделение
Вобще, оформление текста с Markodown становится очень простым и быстрым. Для курсива необходимо поставить знаки * вокруг текста. Для жирного начертания обрамим текст двумя звездочками, а для жирного курсива — тремя. Алтернативный синтаксис — использование знака _ по тем же правилам.
*Курсив* _Курсив_ **Жирный** __Жирный__ ***Жирный курсив*** ___Жирный курсив___
6. Код
Для оформления блока кода используется обратный апостроф ` вокруг кода. Три символа для многострочного кода и один для однострочного:
``` $a = 5; $b = 3; $c = $a + $b; ``` `echo $c;`
7. Цитаты
Под цитатами имеется в виду тег <blockquote>. Для их оформления применяется знак >.
> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eius in labore quidem, sequi suscipit!
8. Ссылки
Хорошо, теперь о том, что в Markdown сделать не так просто.
Существует два варианта оформления ссылок. Первый — обычная вставка в текст:
[Текст ссылки](адрес "Описание")
и второй вариант — оформление ссылки в виде сноски.
[Текст ссылки][Тег1]
… Указывающая, что именно в этом место будет располагаться ссылка, а где-нибудь ниже её описание:
[Тег1][Адрес ссылки]
Результат выполнение будет аналогичен первому варианту, но такое оформление удобнее с точки зрения дальнейшей поддержки и редактирования.
9. Изображения
Изображения помещаются на страницу также, как и ссылки, с одним отличием: в начале записи используется знак !
Вставка реального изображения может выглядеть как-то так:
10. Таблицы
Создание таблиц с Markdown намного нагляднее, чем в HTML. Форматирование интуитивно понятно, добавлю только что для выравнивания текста внутри ячеек используются знаки: в строке, отделяющей заголовок от основной таблицы.
Имя | Возраст -----------|:-------: Анна | 29 Дмитрий | 47 Федор | 32
11. Спецсимволы
Ну и напоследок, в качестве бонуса, о спецсимволах. Чтоб вставить в текст, например, знак больше >, а не выделить текст в виде цитаты, необходимо поставить перед ним обратный слеш (\) вот так: \*
Руководство Markdown Разработка Github Шпаргалка
html — Избавление от маркеров с
Изменено 2 года, 7 месяцев назад
Просмотрено 500 тысяч раз
У меня есть следующий список:
- Бенц
- Другой Бенц
- Другой Другой Бенц
Я хочу избавиться от пуль, поэтому я попробовал:
ul#otis {
тип стиля списка: нет;
}
Но это не сработало.
Как правильно удалить маркеры из отображаемого списка?
- HTML
- HTML-списки
2
Предполагая, что это не сработало, вы можете объединить селектор на основе id с li , чтобы применить css к ли элементов:
#отис ли {
тип стиля списка: нет;
}
Ссылка:
-
list-style-typeв Центре разработчиков Mozilla.
4
У меня была такая же крайне раздражающая проблема, так как скрипт не обращал внимания на мой лист стилей. Вот я и написал:
Это не сработало. Итак, вдобавок , я написал:
Вуаля! это сработало!
Следующий код
#menu li{
тип стиля списка: нет;
} <ул>
выдаст следующий результат:
Чтобы удалить маркеры из ненумерованных списков, вы можете использовать:
list-style: none;
Вы также можете использовать:
тип-стиля-списка: нет;
Работает любой из них, но первый способ короче, чтобы получить тот же результат.
Попробуйте вместо этого, проверено на Chrome/Safari
ul {
стиль списка: нет;
}
0
Чтобы удалить маркер из UL , вы можете просто использовать list-style: none; или тип-стиля списка: нет; Если все еще не работает, то я думаю, что есть проблема с приоритетом CSS . Может быть глобально UL уже определен. Так что лучше всего добавить класс/идентификатор к этому конкретному UL и добавить свои CSS есть. Надеюсь, это сработает.
Поместите