Форматирование списка с отступом в CSS

Question

Допустим, у меня есть список с произвольным числом уровней отступов, например:

Item
  Item
    Item
Item
  Item
Item
  Item
  Item
    Item
      Item
        Item

Если я отображаю этот список в HTML-документе, как я могу использовать CSS для обработкиотступы?Может быть произвольное количество уровней отступов (хотя на практике их будет не более 5 или около того).

Я не хочу создавать класс "indent1" с отступом 10 пикселей,класс "indent2" с отступом 20 пикселей и т. д. - это неуклюже.Можно ли создать общее правило, которое будет отступать на определенное расстояние на основе значения атрибута или положения элемента в иерархии?

Answer 1

Вы бы сделали так:

http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_nestedlists2

И стилизуйте элементы <li>, чтобы не иметь маркера, если хотите.

Answer 2

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

• . Первый элемент списка содержит текст «Элемент» и вложенный

Answer 3

HTML должен сделать это за вас, поэтому, если вы оставите настройки полей и отступов для элемента

в одиночку и просто поиграете с другими настройками, такими как размер шрифта, цвет и т. Д., Все должно работать нормально.

Например, это должно сделать каждый элемент списка жирным шрифтом и показать кружок для изображения точки маркера и при этом сохранить отступ:

<style type="text/css">
            li
            {
                font-weight: bold;
                list-style-type: circle;
            }
</style>