Задача
Отобразить маркированый список горизонтально без маркеров.
Решение
Тег маркированного списка
Вам уже должно быть известно, что в HTML есть блочные и строчные элементы. Строчные элементы не создают своих блоков, пример таких элементов - это теги или
. Блочные элементы отображаются с новой строки и создают прямоугольный блок, пример таких тегов Так вот, тег Чтобы тег За то, как элемент будет отображён в документе отвечает CSS свойство display
. Рассмотрим три его значения (хотя их больше): Сначала сделаем горизонтальный список превратив его пунткы в строчные элементы. В стиле CSS пропишем правило, в котором селектору li
установлено свойство display
со значением inline
.
Итак, этот стиль сработал и получили горизонтальное расположение пунктов списка: Рисунок 1. Работа примера №1.
У этого метода есть недостатки. Дело в том, что inline
элементы имеют некоторые ограничения, по сравнению с блочными элементами. Например им нельзя задавать ширину и высоту, а блочным можно. Например нам нужно чтобы элемент создаваемого нами меню имел ширину 150px
и высоту 40px
. Попробуем изменить стиль на следующий, то есть добавим два правила устанавливающих размер пункта меню:
Эти правки не приведут ни к каким изменениям. Чтобы элементы меню располагались горизонтально и можно было устанавливать их ширину и высоту им нужно установить тип inline-block
. Изменим код нашего примера:
Этот код работает и изменения видны: Но могут быть разные варианты, например нам нужно отобразить в меню вложенные списки:
Вот результат работы этого кода: Мы видим что блоки выравниваются по высоте не так, как нам хотелось бы. Конечно, можно указать для всех блоков одинаковую высоту, но не всегда нам заранее известно её точное значение, и оно может меняться. А собственно, почему так происходит? Наши блоки имеют свойство display
со значением inline-block
. Это значит что у них есть качества как блочных элементов (возможность указать ширину и высоту), так и строчных элементов. То что мы наблюдаем - это качество строчных элементов. Давайте рассмотрим строку с символами "А" разной величины: А
А
А
А
А
А
А
Мы видим что все буквы по вертикали выравнены по нижней линии. Точнее по базовой линии, но сейчас не будем влазить в дебри. Так вот, с нашими блоками произошло то же самое. Для выравния текста по вертикали служит свойство vertical-align
. В нашем примере №3 нужно использовать значение top
, которое выравняет верхнюю границу элемента по верху самого высокого элемента строки. Пока применим его к строке с символами "А" разной величины: А
А
А
А
А
А
А
Кажется, что буквы немного "скачут". Я установил CSS границу border самой высокой букве, чтобы было видно, что скачков на самом деле нет, есть пустое пространство между верхней границей (по которой происходит выравнивание) и верхней точкой символа "А". Свойство vertical-align
нужно применять к каждому строчному элементу, оно не наследуется. Вы можете прочитать подробней про это свойство: vertical-align . После этого отступления продолжим размещать элементы списка горизонтально. Разместить элементы списка горизонтально можно используя свойство float
. Это свойство указывает по какой стороне выравнивается элемент, имеет две позиции: left
и right
. Вот пример с использованием этого кода:
Вот результат работы кода: Вроде пример работает. Но в использовании этого свойства есть один нюанс. Сейчас мы его рассмотрим. Для примера возьмём код, в котором есть два горизонтальных списка с разным способом расположения элементов горизонтально: display
и float
:
Вот результат работы кода: В этих примерах контейнеры списка При этом на первый взгляд всё работает. Но давайте поменяем местами наши списки. Поставим список с классом menu-1
в коде перед списком с классом menu-2
(сейчас он ниже). Вот что мы получим в результате: Пункты нижнего меню также обтекают вержнее меню, ведь действие свойства float
никто не отменял и оно распространяется на все последующие элементы. Как решить эту проблему? Для этого нужно использовать свойство clear
, оно отменяет обтекание элементом другого элемента, если у того установлено свойство float
. Вот изменённый пример с использованием свойства clear
:
Видно что нижний список уже не обтикает верхний, элементы не наезжают друг на друга. Но в первом списке теги Кроме того, в работе нам не всегда известно какой элемент будет следовать за элементом использующим float
. Идеальный был бы вариант закрытия работы свойства float
в том же блоке, в котором он открыт. Это делается при помощи псевдоэлемента. Вот код:
Теперь у нас 100% рабочий код. Этот приём со свойством float
обычно используют при вёрстке сайтов для выравнивания столбцов, которые создаются тегами Но для полноты раскрытия темы мы тут ознакомились со всеми возможными вариантами. Хотя может есть и другие способы, например использование CSS-таблиц, но поисковики настойчиво рекомендуют использовать таблицы только по их прямому назначению, а не для организации элементов навигации или ещё как-либо. Списки бывают нумерованными и ненумерованными. Нумерованные списки выводятся кодом:
Не нумерованные списки выводятся кодом:
Каждый пункт любого списка заключается в тег li. Все пункты списка заключаются в один общий тег ul или ol. Стили этих тегов прописываются в таблице стилей. Для каждого тега присваиваются определенные стили оформления. В них указываются отступы от текста. Для нумерованного списка прописываются стили нумерации для каждого пункта. Стандартные арабские цифры описываются значением decimal. list-style-type: decimal; /*арабские цифры*/ Для маркерованного списка указывается стиль символов — квадратики или кружочки. list-style-type: circle; /*кружки*/ Каждому пункту меню можно назначить изображение. list-style-image: url(‘путь к изображению’); Обычно в шаблонах нумерованный список оформляется простыми цифрами, а не нумерованный – черными квадратиками и кружочками. Это скучно и невыразительно. Давайте это исправим. Откройте файл стилей style.css. Найдите раздел с названием /* Text elements */ Стандартный код выглядит вот так: Посмотрите вот на такое симпатичное оформление нумерованного списка. Нравится? Давайте повторим. Найдите стили для тега ol. Пропишите к нему новые свойства. Ol {
padding: 0px 0 0 20px;
margin: 0.5em 0 1.571em 1.9em;
color: #2E2E2E;
list-style-type: none;
font: 15px/17px Verdana, Arial, Helvetica, sans-serif;
z-index: 2;
counter-reset: point;
}
ol li {
margin-bottom: 4px;
line-height: 1.6;
color: #2E2E2E;
position: relative;
}
ol li:before {
margin-bottom: 4px;
counter-increment: point 1;
line-height: 1.6;
height: 24px;
margin-left: -36px;
left: 0px;
width: 24px;
margin-top: 1px;
background: #BDC3C7;
content: counter(point);
text-align: center;
position: absolute;
font-weight: bold;
}
Для того чтобы вы поняли, где что вам нужно изменить под свой дизайн, давайте разберем этот код по полочкам. list-style-type: none; — отключает вывод стандартных цифр before — псевдоэлемент для тега ol li. Имеет следующие стили: В своих стилях вы можете задать любые цвета, выравнивания, размеры шрифта и отступы. На одном женском сайте есть очень привлекательные нумерованные списочки. Как это реализовано? Давайте рассмотрим следующий код:
/*первый номер*/
ol li:first-child {
list-style-image: url(путь к изображению с цифрой 1);
}
/*второй номер*/
ol li:nth-child(2n) {
list-style-image: url(путь к изображению с цифрой 2);
}
/*третий номер*/
ol li:nth-child(3n) {
list-style-image: url(путь к изображению с цифрой 3);
}
/*четвертый номер*/
ol li:nth-child(4n) {
list-style-image: url(путь к изображению с цифрой 4);
}
/*Далее прописываем точно также только для следующих номеров пунктов*/
В коде такого нумерованного списка нужно перечислить все номера пунктов и для каждого из них назначить уникальную иконку. Если в списках в статьях вы используете до 20 нумерованных пунктов, то нужно прописать псевдокласс nth-child(An) 20 раз. Так чтобы последним в стилях шел псевдокласс nth-child(20n). Найдите в файле стилей строчки, которые описывают оформление нумерованного списка (теги ol li). Допишите в него псевдокласс first-child. Скопируете и вставьте его один раз, затем измените данное свойство на nth-child(An) и скопируете столько, сколько номеров должны иметь свою иконку. Проставьте номера пунктов. Для каждого номера пропишите свойство list-style-image с собственной уникальной иконкой. Если иконки на сайте располагаются далеко от пунктов или накладываются на них, то нужно отредактировать выравнивание и отступы цифровых иконок или текста пунктов. Мне очень понравился вот такой маркированный список Ul {
padding: 11px 0 5px 0;
}
ul li {
padding-left: 32px;
margin-bottom: 10px;
font: normal 15px Verdana, sans-serif;
color: #2E2E2E;
line-height: 1.6;
border-bottom: 1px dashed #ccc;
padding-bottom: 10px;
}
ul li:before {
content: "";
position: absolute;
width: 27px;
height: 24px;
margin-left: -35px;
margin-top: -2px;
background: url("images/sprite.jpg") 0px 2px no-repeat;
list-style-type: circle;
}
ul li:nth-child(2n):before {
content: "";
position: absolute;
width: 27px;
height: 43px;
margin-left: -35px;
margin-top: -2px;
background: url("images/sprite.jpg") 0px -17px no-repeat;
list-style-type: circle;
}
Можно вместо стандартного стиля list-style-type назначить свойство «путь к иконке» — list-style-image:url. Но тогда нужно прописать внешний левый отступ от краешков сайта — без него иконки не будут отображаться, уйдут за зону области контента. Для эксперимента можно назначить отступы: Ul li{
list-style-image: url(images/radio.png);
margin-left: 30px;
}
Чередование иконок можно задать свойством nth-child(An). В приведенном примере использован псевдоэлемент before. В коде прописан один псевдокласс nth-child(2n). Его значение — 2. Получается, что каждому четному пункту соответствует другая иконка. Если вместо 2n написать 2n+1, то другая иконка будет приходиться на нечетные пункты. Для каждого пункта списка можно задать нижнее подчеркивание. В приведенном примере пункты подчеркиваются пунктиром. Также каждому пункту можно назначить рамочки, фон, иконки. Только не перемудрите. Наша задача — не сразить всех наповал навороченным дизайном, а улучшить качество восприятия контента. Иногда нужно разместить несколько списков с разными стилями. Если назначить общие стили, то одно и то же оформление будет присвоено всем спискам. Разные списки можно вывести, если назначить тегу ol или ul отдельный id и прописать его в html режиме редактирования статьи. Ну а в файле стилей для этого id нужно прописать отдельные стили. Вот, например, один симпатичный вариант оформления содержания: В HTML вы пропишите список так:
В CSS вы пропишите стили так: Ol#sod{
padding: 0px 20px 10px 51px;
margin: 0.5em 0 0em 1em;
color: #2E2E2E;
list-style-type: none;
background: #f1f4f5;
border-left: #BDC3C7 4px solid;
display: inline-block;
}
ol#sod li{}
ol#sod li:before{
font-weight:normal !important
}
Новый стиль отличается от основного оформлением тега ol: фоном, стилем отображения, линией слева от содержимого. Используя в тексте несколько разных по оформлению списков, вы сделаете подачу информации еще интереснее. При перечислении каких-либо предметов можно задать одни иконки, а при перечислении действий — другие. Здесь уже дизайн ограничивается только вашей фантазией. Эти методы применимы и в дизайне пунктов меню, рубрик и любых других элементов сайта. Как же их прописать в HTML коде? Один кусочек кода обрамляет анкор ссылки, а другой кусочек кода ставится рядом с тем местом, куда нас нужно перебросить при нажатии на ссылку.
А в тексте статьи нужно написать так: Заголовок 1…
Заголовок 2…
Заголовок 3…
Может быть более опытные вебмастера меня в чем-то поправят. Я просто советую то, что попробовала на практике сама. Если у вас остались какие-то вопросы, буду рада увидеть их в комментариях. Агеева Вероника.
Возможно вас еще заинтересует:
Если вы когда-либо пробовали изменять css-стили номеров строк (цифр) в упорядоченных списках Вот самый простой пример нестилизованного списка: Давайте рассморим несколько способов решения вышеописанной задачи. Традиционный способ решения этой проблемы сводится к тому, чтобы скрыть номера строк, автоматически расставленные браузером. При этом используется свойство list-style: none; . Согласитесь, выглядит избыточно и не гибко. Мы скрываем автоматически расставленные порядковые номера и заменяем их вручную заданными значениями, засоряем верстку и т.п. Давайте посмотрим, как можно добиться такого же результата, не засоряя верстку и используя псевдоэлемент::before и css-свойства content , counter-increment , counter-reset . Вначале мы приведем код и демку, а потом разберемся, что к чему. Как видите, html-код остается чистым и красивым. При этом вся стилизация элементов списка переносится в css. Давайте разберем по пунктам:
подробнее о css-счетчиках можно посмотреть в Примечание:
атрибут reversed поддерживается только браузерами Chrome и Safari. Start:
Устанавливает начальное целочисленное значение, с которого будет начинаться нумерация элементов в списке.
Пример »
type:
Определяет вид маркера, который будет использоваться для элементов списка:
Тег
или
Рисунок 2. Работа примера №2.
Рисунок 3. Работа примера №3.
Второй способ
Рисунок 4. Работа примера.
Рисунок 5. Работа примера.
имеют красную границу толщиной 1 пиксел. Но верхний список, в котором используется свойство display
, включает в себя элементы списка. А вот элементы списка созданного с использованием свойства float
выпадают из своего контейнера.
Рисунок 6. Работа примера.
.
Рисунок 7. Работа примера.
Рисунок 8. Работа примера.
. Таким способом мы получаем нормальное построение столбцов с требуемым выравниванием по высоте. Когда мы создаём меню, то нам, в большенстве случаев, не важна высота блоков, она практически всегда одинакова. Поэтому использование правила {display
: inline-block
} в этих случаях вполне оправдано.
Список с цифрами
Список с галочками или другими символами
list-style-type: square; /*квадраты*/Где стили списков прописаны в шаблоне Twenty Eleven?
Как оформить нумерованный список?
Нумерованный список с использованием фона
counter-reset: point; — задает переменную для счетчика нумерации
position: relative; — размещает нумерацию возле самих пунктов
content: counter(point); — выводит значение переменной
counter-increment: point 1; — увеличивает счетчик на 1
position: absolute;
background: #BDC3C7; — фон для цифр (фон можно задать цветом или красивой иконкой
margin – внешние отступы
padding – внутренние отступы
color – цвет текста элемента
background – фон
text-align – выравнивание текста
font-weight – толщина (насыщенность) шрифтаНумерованный список с уникальным изображением для каждого пункта
Как оформить маркированный (ненумерованный) список?
Маркированный список ul li с чередующимися иконками
Как вывести на странице несколько списков с разным оформлением?
Содержание
Как создать ссылки-якоря в списке содержания?
Содержание
, то, наверняка, сталкивались с проблемами. Достучаться до стилей этих элементов при помощи css-селекторов невозможно. А ведь довольно часто дизайн интерфейса предполагает изменение иx цвета, фона, размера и т.д.
html
Традиционно топорный способ.
css
li{
list-style: none;
}
.num{
color: white;
background: #2980B9;
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
width: 40px;
height: 40px;
}
html
Красивый и правильный способ.
css
ol{
counter-reset: myCounter;
}
li{
list-style: none;
}
li:before {
counter-increment: myCounter;
content:counter(myCounter);
color: white;
background: #2980B9;
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
width: 40px;
height: 40px;
}
html
.
Описание
Атрибуты
reversed:
Указывает, что элементы списка будут идти в порядке убывания (вместо порядка по возрастанию). Возможные значения логического атрибута:
Пример »
так же поддерживает Глобальные атрибуты и События
Стиль по умолчанию
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
Пример
Тематические материалы:
Обновлено: 20.04.2021
103583
Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter
Рубрики сайта
