Css li: Стилизация списков — Изучение веб-разработки

Содержание

Стилизация списков — Изучение веб-разработки

Списки, по-большому счету, ведут себя также как любой другой текст, но существуют некоторые специфичные настройки CSS, о которых вы должны знать. В этой статье они все описываются.

Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки  — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример доступен на Github (проверьте также источник кода.)

HTML для нашего примера списка представлен ниже:

<h3>Shopping (unordered) list</h3>

<p>Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<ul>
  <li>Hummus</li>
  <li>Pita</li>
  <li>Green salad</li>
  <li>Halloumi</li>
</ul>

<h3>Recipe (ordered) list</h3>

<p>Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<ol>
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

<h3>Ingredient description list</h3>

<p>Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<dl>
  <dt>Hummus</dt>
  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
  <dt>Pita</dt>
  <dd>A soft, slightly leavened flatbread.</dd>
  <dt>Halloumi</dt>
  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
  <dt>Green salad</dt>
  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
</dl>

Если вы перейдёте к живому примеру прямо сейчас и изучите элемент списка используя инструменты разработчика браузера, то вы заметите несколько стилей установленных по умолчанию:

  • Элементы <ul> и <ol> имеют верхний и нижний margin по 16px (1em) и padding-left 40px (2.5em.)
  • Объекты списка (элементы <li>) не имеют заданных значений по умолчанию для интервалов.
  • Элемент <dl> имеет верхний и нижний margin по 16px (1em), но padding не задан.
  • Элементы <dd> имеют margin-left 40px (2.5em.)
  • Элементы <p> которые мы включили для ссылок (сноски) имеют верхний и нижний margin по 16px (1em), точно так же, как и различные типы списков.

При оформлении списков, вам необходимо настроить их стили так, чтоб они сохраняли то же вертикальное расстояние, что и окружающие их элементы (такие как параграфы и изображения; иногда называемые вертикальным ритмом) и то же расстояние по горизонтали как и между собой (посмотреть законченный стилизированный пример на Github, а также найти исходный код.)

CSS, используемый для оформления текста и интервалов, выглядит следующим образом:



html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h3 {
  font-size: 2rem;
}

ul,ol,dl,p {
  font-size: 1.5rem;
}

li, p {
  line-height: 1.5;
}




dd, dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 1.5rem;
}
  • Первое правило устанавливает шрифт сайта и основной размер шрифта 10px. Они наследуются всеми на этой странице.
  • Правила 2 и 3 задают относительные размеры шрифтов заголовков, различных типов списков (их наследуют дочерние элементы списков) и параграфов. Это значит, что каждый параграф и список будут иметь одинаковый размер шрифта, а также верхний и нижний интервалы, помогая сохранить согласованность вертикального ритма.
  • Правило 4 задаёт одинаковую высоту line-height в параграфах и пунктах списка — так, что параграфы и каждый отдельный пункт списка будут иметь те же интервалы между строками. Это также поможет сохранить согласованность вертикального ритма.
  • Правила 5 и 6 применяются к списку описаний — мы задаём одинаковую высоту line-height между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.  

Теперь, рассмотрев общие методы интервалов для списков, давайте изучим некоторые специфичные спискам свойства. Существует три свойства, с которых вам надо начать знакомство, которые могут быть установлены для элементов <ul> или <ol>:

  • list-style-type (en-US): задаёт тип маркеров для использования в списке, например, квадратные или круглые маркеры для неупорядоченного списка, или цифры, буквы или римские цифры для упорядоченного списка.
  • list-style-position (en-US): управляет будет ли маркер появляется внутри пунктов списка или вне их перед началом каждого элемента.
  • list-style-image: позволяет вам использовать пользовательские изображения в качестве маркеров, а не просто квадрат или круг.

Стили маркеров

Как указано выше, свойство list-style-type (en-US) позволяет вам устанавливать какой тип маркера использовать в качестве точек маркера. В нашем примере мы установили использование заглавных римских цифр в упорядоченном списке:

ol {
  list-style-type: upper-roman;
}

Это даёт нам следующий вид:

Вы можете найти гораздо больше опций, заглянув на справочную страницу list-style-type (en-US).

Позиция маркера

Свойство list-style-position (en-US) устанавливает будет ли появляться маркер внутри пунктов списка или снаружи перед началом каждого пункта. Значение по умолчанию — outside, которое заставляет маркеры находится снаружи пунктов списка, как видно выше.

Если вы установите значение на inside, то маркеры будут находиться внутри строк:

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}

Использование пользовательского изображения как маркер

Свойство list-style-image позволяет вам использовать пользовательское изображение в качестве вашего маркера. Синтаксис довольно прост:

ul {
  list-style-image: url(star.svg);
}

Однако это свойство немного ограничено с точки зрения управления позициями, размерами (и т.д.) маркеров. Вам лучше использовать семейство свойств background, о которых вы узнаете намного больше в модуле Styling boxes. А пока вот вам образец для дегустации!

В нашем законченном примере мы оформили неупорядоченный список следующим образом (поверх того, что вы уже видели выше):

ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url(star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}

Мы сделали следующее:

  • Установили padding-left элемента <ul> с 40px по умолчанию на 20px, затем установили то же самое количество в пунктах списка. Это для того, чтобы все пункты списка продолжали выравниваться с порядком пунктов списка и описаний списка описаний, но пункты списка имеют некоторый padding для фоновых изображений чтобы сидеть внутри. Если бы мы не сделали этого, то фоновые изображения накладывались бы с текстом пунктов списка, что выглядело бы неряшливо.
  • Установили list-style-type (en-US) на none, для того чтобы маркеры не появлялись по умолчанию. Мы собираемся использовать свойства background для управления маркерами.
  • Вставили маркер в каждый пункт неупорядоченного списка. Соответствующие свойства, следующие:
    • background-image: Указывает путь к файлу изображения, который вы хотите использовать в качестве маркера.
    • background-position: Определяет где в фоне выбранного элемента появится изображение — в данном случае мы говорим 0 0, что значит что маркер будет появляться в самом верху слева каждого пункта списка.
    • background-size: Задаёт размер фонового изображения. В идеале мы хотим, чтоб маркеры были того же размера что и пункты списка (или самую малость меньше или крупнее). Мы используем размер 1.6rem (16px), что очень хорошо сочетается с отступом (padding) 20px, который мы позволили разместить внутри маркера — 16px плюс 4px интервала между маркером и текстом пункта списка работают хорошо.
    • background-repeat: По умолчанию, фоновые изображения повторяются пока не заполнят доступное фоновое пространство. Мы хотим всего лишь одну копию вставленного изображения в каждом случае, поэтому мы установили значение no-repeat.

Это даёт нам следующий результат:

короткая запись list-style

Эти три свойства упомянутые выше могут все быть заданы, используя лишь одну короткую запись свойства, list-style (en-US). Например, следующий CSS:

ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}

Может быть заменён этим:

ul {
  list-style: square url(example.png) inside;
}

Значения могут быть перечислены в любом порядке, и вы можете использовать одно, два и все три (значения по умолчанию, использованные для свойств, которые не включены — disc, none, и outside). Если указаны и type и image, тип используется в качестве запасного варианта, если изображение по какой-либо причине не может быть загружено.

Иногда вам может понадобиться вести счёт в упорядоченном списке по-другому — например начинать с цифры отличной от 1, или считать в обратном порядке, или вести счёт с шагом больше 1. HTML и CSS имеют несколько инструментов которые помогут с этим.

start

Атрибут start позволит вам начать счёт списка с цифры отличной от 1. Например:

<ol start="4">
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

что даст вам такой результат:

reversed

Атрибут reversed начнёт отсчёт по убыванию вместо возрастания. Например:

<ol start="4" reversed>
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

что даст вам такой результат:

Обратите внимание: Если пунктов в списке в обратном списке больше, чем значение атрибута start, счёт продолжится до нуля и далее отрицательные значения.

value

Атрибут value позволит вам установить специфичные цифровые значения к пунктам списка. Например:

<ol>
  <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li value="6">Wash and chop the salad.</li>
  <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

что даст вам такой результат:

Обратите внимание: Даже если вы используете нечисловой list-style-type (en-US), вам всё равно надо использовать эквивалентное цифровое значение в атрибуте value.

В этой сессии активного изучения, мы хотим, чтобы вы взяли всё что вы выучили выше и попробовали стилизовать вложенный список. Мы предоставили вам HTML и хотим, чтобы вы:

  1. Задали неупорядоченному списку квадратные маркеры.
  2. Задали пунктам неупорядоченного и упорядоченного списка 1,5 межстрочный интервал их размера шрифта.
  3. Задали упорядоченному списку маркеры в виде строчных букв.
  4. Не стесняйтесь играться с примерами списков столько сколько вам нравится, экспериментируя с типами маркеров, интервалами или со всем что вы найдёте.

Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы застрянете, нажмите кнопку Show solution чтобы посмотреть возможный ответ.

Счётчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные. Мы рекомендуем изучить это, если вы захотите размяться. Смотрите:

В плане стилизации списки сравнительно легко освоить, как только вы освоите несколько связанных базовых принципов и специфичные свойства. В следующей статье мы перейдём к методам стилизации ссылок.

CSS установить отступ li — CodeRoad

Гугл и поиск stack overflow не дали никаких результатов, которые я мог бы распознать, так что простите меня, если об этом спрашивали раньше…

У меня есть выпадающее главное меню, которое использует списки в качестве своей основы. Проблема в том, что списки очень широки, и они не отступают достаточно далеко при расширении. Так вот в чем моя проблема! Как увеличить размер отступа в списках с помощью CSS?

html

css

Поделиться

Источник


Georges Oates Larsen    

12 июля 2012 в 05:25

5 ответов

  • грязный css отступ в vim

    При редактировании файла html в vim отступ для css внутри тегов style является беспорядочным. Например, вот как он сделал бы отступ в этом примере кода css без какого-либо ручного вмешательства, чтобы исправить отступ с моей стороны: div.class { color: white; backgroung-color: black; } Почему это…

  • Как сделать так, чтобы LI innerText имел отступ

    Редактировать: этот HTML-это выход из приложения Flash & его плохо образована, потому что он содержит элементы NOT в ул или ПР элементом. Есть ли способ получить желаемый отступ с помощью этого HTML (используя CSS)? Надеюсь, мне не придется разбирать HTML & вставлять мои ol-теги там, где…


71

padding-left — это то, что управляет отступом ul , а не margin-left .

Сравните: вот установка padding-left на 0 , обратите внимание, что все отступы исчезают.

ul {
  padding-left: 0;
}
<ul>
  <li>section a
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li>
</ul>
<ul>
  <li>section b
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li>
</ul>

а вот установка margin-left на 0px . Обратите внимание, что отступ не меняется .

ul {
  margin-left: 0;
}
<ul>
  <li>section a
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li>
</ul>
<ul>
  <li>section b
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li>
</ul>

Поделиться


gman    

19 февраля 2015 в 02:05


66

чтобы сделать отступ в раскрывающемся меню ul , используйте

/* Main Level */
ul{
  margin-left:10px;
}

/* Second Level */
ul ul{
  margin-left:15px;
}

/* Third Level */
ul ul ul{
  margin-left:20px;
}

/* and so on... */

Вы также можете сделать отступ li s и (если применимо) a s (или любые другие элементы контента , которые у вас есть), каждый с различными эффектами.
Вы также можете использовать padding-left вместо margin-left , опять же в зависимости от желаемого эффекта.

Обновление

По умолчанию многие браузеры используют padding-left для установки начального отступа. Если вы хотите избавиться от этого, установите padding-left: 0px;

Тем не менее, параметры margin-left и padding-left по-разному влияют на отступы списков. В частности: margin-left влияет на отступ снаружи границы элемента, в то время как padding-left влияет на расстояние внутри границы элемента. (Подробнее о модели CSS box читайте здесь)

Установка padding-left: 0; оставляет значки пули li висеть над краем границы элемента (по крайней мере, в Chrome), что может быть или не быть тем, что вы хотите.

Примеры заполнения слева против поля слева и как они могут работать вместе на ul: https://jsfiddle.net/daCrosby/bb7kj8cr/1/

Поделиться


DACrosby    

12 июля 2012 в 05:32

  • CSS необъяснимый отступ

    В этом файле есть отступ, из-за которого элемент ‘scroller’ имеет левое поле ровно 30px; . Я не могу найти причину этого. Это толкает меня вверх по стене. Проблема в том, что где-то находится этот файл: http://www.divethegap.com/обновление/з-css/admin/master.css В html <div id=wrapper>…

  • Добавьте висячий отступ к тексту внутри <li>

    (отредактировано несколько раз для ясности) Примечание: Я не тот, кто пишет HTML. Вот формат HTML (Примечание: ссылки и текст после ссылок находятся в одной строке): <li> <strong>Title of section</strong> <br> &nbsp;&nbsp;&nbsp; <!— Add hanging indent to…


23

Также попробуйте:

ul {
  list-style-position: inside;
}

Поделиться


Shankar Cabus    

21 сентября 2013 в 15:10


6

li{
    margin-left:50px;
}

или замените 50 пикселей на все, что вы хотите.

Поделиться


ricick    

12 июля 2012 в 05:27


0

Я обнаружил, что выполнение этого в два относительно простых шага, казалось, работало довольно хорошо. Первое определение css для ul задает базовый отступ, который требуется для списка в целом. Второе определение задает значение отступа для каждого вложенного элемента списка в нем. В моем случае они одинаковы, но вы, очевидно, можете выбрать все, что захотите.

ul {
    margin-left: 1.5em;
}

ul > ul {
    margin-left: 1.5em;
}

Поделиться


Craig    

30 ноября 2015 в 04:33

Похожие вопросы:

CSS — распространение элементов li по ul

Есть ли способ разложить элементы (например, < li>внутри < ul>)? Мои < li>встроены (а не вертикальны), и я не хочу менять их размер. Я просто хочу установить пространство между <…

Неупорядоченный список отступ css, php, xhtml

Я новичок во всем этом. У меня есть шаблон для макета веб-сайта, над которым я работаю. Левое меню было прекрасно в шаблоне. С тех пор как я изменил левое меню, чтобы оно появилось в PHP, оно…

Отступ CSS в emacs

Так что автоматический отступ emacs для CSS сводит меня с ума. Вот как мне нравится CSS выглядеть: #foo ul.bar { …. } #foo ul.bar li { …. } #foo ul.bar li a { …. } Вот что дает мне emacs с его…

грязный css отступ в vim

При редактировании файла html в vim отступ для css внутри тегов style является беспорядочным. Например, вот как он сделал бы отступ в этом примере кода css без какого-либо ручного вмешательства,…

Как сделать так, чтобы LI innerText имел отступ

Редактировать: этот HTML-это выход из приложения Flash & его плохо образована, потому что он содержит элементы NOT в ул или ПР элементом. Есть ли способ получить желаемый отступ с помощью этого…

CSS необъяснимый отступ

В этом файле есть отступ, из-за которого элемент ‘scroller’ имеет левое поле ровно 30px; . Я не могу найти причину этого. Это толкает меня вверх по стене. Проблема в том, что где-то находится этот…

Добавьте висячий отступ к тексту внутри <li>

(отредактировано несколько раз для ясности) Примечание: Я не тот, кто пишет HTML. Вот формат HTML (Примечание: ссылки и текст после ссылок находятся в одной строке): <li> <strong>Title…

CSS отступ не работает

Может ли кто-нибудь дать мне представление о том, как сделать отступ текста здесь в CSS (нажмите здесь), как показано здесь: Таким образом, он отступил, как показано на рисунке. HTML: <div…

Как сделать отступ вправо от li

Как сделать отступ справа от li в Bootstrap 4? У меня есть этот код, но круговая пуля li — это один символ слева от <h6> . У меня статическое положение. <h6>Test1</h6>…

CSS упорядоченный список-стиль номера, когда li содержит несколько строк, сохраняя отступ

Варианты этого вопроса были заданы и даны ответы, но я не могу найти ответа на этот конкретный вопрос… Я хотел бы стилизовать число в каждом элементе li в моем ol , учитывая , что каждый li может…

Тег li

Пример

Один заказанный (<ol>) и один неупорядоченный (<ul>) Список HTML:

 
Coffee
 
Tea
 
Milk

<ul>
 
<li>Coffee</li>
 
<li>Tea</li>
 
<li>Milk</li>
</ul>

Подробнее примеры ниже.

Определение и использование

Тег <li> определяет элемент списка.

Тег <li> используется в упорядоченных списках(<ol>), неупорядоченные списки (<ul>), и в
списки меню (<menu>).

Поддержка браузера

Элемент
<li>ДаДаДаДаДа

Различия между HTML 4,01 и HTML5

Атрибут <type> является навестить поддерживается в HTML5.

Атрибут <value> был Устаревшие
в HTML 4,01, но поддерживается в HTML5.

Советы и примечания

Совет: Используйте CSS для определения типа списка.

Атрибуты

АтрибутЗначениеОписание
type1
A
a
I
i
disc
square
circle		Не поддерживается в HTML5.
Указывает, какой тип точки маркирования будет использоваться
valuenumberЗадает значение элемента списка. Следующие элементы списка будут увеличиваться с этого числа (только для списков <ol>)

Глобальные атрибуты

Тег <li> также поддерживает Глобальные атрибуты в HTML.

Атрибуты события

Тег <li> также поддерживает Атрибуты событий в HTML.

Попробуйте примеры

Вложенный список
Список внутри списка.

Другой вложенный список
Более сложный вложенный список.

Похожие страницы

HTML Учебник: HTML Lists

HTML DOM Ссылки: Li Object

CSS Учебник: Styling Lists

Параметры CSS по умолчанию

В большинстве обозревателей элемент <li> будет отображаться со следующими значениями по умолчанию:

li {
    display: list-item;
}

Что такое маркированные списки(Unordered Lists) и нумерованные списки (Ordered Lists)