Вложенный список html: Как сделать вложенный список? | htmlbook.ru

Содержание

Вложенные списки | HTML | CodeBasics

При составлении списка дел может возникнуть необходимость разбить пункты на несколько дополнительных подпунктов. Например, в списке дел пункт «Сходить в магазин» может содержать в себе список покупок.

Для создания такой структуры используются вложенные списки. Это позволяет вкладывать в качестве элемента список не просто текст, а новый список, создавая сложную структуру:

Сходить в магазин
- Купить молоко
- Купить хлеб
Пройти уроки на Code Basics

Вот как это выглядит в HTML:

<ul>
  <li>Сходить в магазин
    <ul>
      <li>Купить молоко</li>
      <li>Купить хлеб</li>
    </ul>
  </li>
  <li>Пройти уроки на Code Basics </li>
</ul>

Важно отметить, что вложенный список является частью пункта списка и находится внутри тега <li>:

<li>Сходить в магазин
  <ul>
    <li>Купить молоко</li>
    <li>Купить хлеб</li>
  </ul>
</li>

Такая вложенность позволяет сохранить семантику и указать, что вложенный список относится именно к пункту «Сходить в магазин», а не к какому-либо ещё.

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

Задание

Создайте разметку для списка:

JavaScript Career
- Frontend
- Backend
PHP Career

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

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

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное

←Предыдущий

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github. com/hexlet-basics

html — Смещение вложенного списка

Вопрос задан 1 год 7 месяцев назад

Изменён 1 год 7 месяцев назад

Просмотрен 106 раз

Подскажите, пожалуйста. Вроде проверил все основные нюансы, посмотрел основные youtube уроки про комбинации селекторов, но все равно второй вложенный список (в третьем

LI основного списка) все равно получается смещенным на основную таблицу. Хотя первый размещается корректно

При этом я вижу то, что в снипете отображение идет корректо, а вот в локальном браузере нет..

 *{
    margin: 0px;
    padding: 0px;
}
.main-menu *{
  list-style: none;
}
.main-menu div ul{
  display: flex;
  margin-top: 100px;
  margin-left: 100px;
}
.main-menu a{
  color:red;
  display: block;
  text-align: center;
}
. main-menu li{
  border: 1px solid black;
  width: 200px;
  position: relative;
}
.main-menu ul ul{
  position: absolute;
  display: none;
  padding:0;
  margin: 0;
  left:0;
}
.main-menu ul li:hover ul{
  display:block;
}

 <!DOCTYPE html>
    <html lang="ru" dir="ltr">
      <head>
      <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
      <title>MoreDoor</title>
      <link rel="stylesheet" type="text/css" href="resources/css/style.css">
      <script src="https://kit.fontawesome.com/381ef55a42.js" crossorigin="anonymous"></script>
    
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Cuprum:wght@500&display=swap" rel="stylesheet">
    
     </head>
    
    <body>
    <header>
        <nav>
            <div>
            <ul>
                <li><a href="index.  html"><i       ></i>Главная</a></li>
                <li><a href="index.html"><i  ></i>Межкомнатные двери</a>
                  <ul>
                    <li><a href="index.html">Первые</a></li>
                    <li><a href="index.html">Вторые</a></li>
                    <li><a href="index.html">Третьи</a></li>
                    <li><a href="index.html">Четвертые</a></li>
                    <li><a href="index.html">Пятые</a></li>
                  </ul>
                </li>
                <li><a href="index.html"><i></i>Входные Двери</a>
                  <ul>
                    <li><a href="index.html">Шестые</a></li>
                    <li><a href="index.html">Седьмые</a></li>
                    <li><a href="index.   html">Восьмые</a></li>
                    <li><a href="index.html">Девятые</a></li>
                    <li><a href="index.html">Десятые</a></li>
                  </ul>
                </li>
                <li><a href="index.html"><i  ></i>Фурнитура</a></li>
                <li><a href="index.html"><i></i>Услуги</a></li>
                <li><a href="index.html"><i></i>Плинтусы</a></li>
                <li><a href="index.html"><i></i>О компании</a></li>
                <li><a href="index.html"><i></i>Акции</a></li>
                <li><a href="index.html"><i></i>Контакты</a></li>
            </ul>
            </div>
        </nav>
    </header>
    </body>
    
    </html>

html
css

Разобрался. У родительского li нужно было поставить position:relative (это было) и четкую высоту к примеру в 40px (этого не было). После этого, у дочернего li нужно было поставить

position: absolute (это было. требуется для ориентации относительно родителя) и смещение top:40px (этого не было) как раз в высоту родительского блока. И все будет ровно.

 *{
    margin: 0px;
    padding: 0px;
}
.main-menu *{
  list-style: none;
}
.main-menu div ul{
  display: flex;
  margin-top: 100px;
  margin-left: 100px;
}
.main-menu a{
  color:red;
  display: block;
  text-align: center;
}
.main-menu li{
  border: 1px solid black;
  width: 200px;
  position: relative;
  height:40px;
}
.main-menu ul ul{
  position: absolute;
  display: none;
  padding:0;
  margin: 0;
  left:0;
  top: 40px;
}
.main-menu ul li:hover ul{
  display:block;
}

 <!DOCTYPE html>
    <html lang="ru" dir="ltr">
      <head>
      <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
      <title>MoreDoor</title>
      <link rel="stylesheet" type="text/css" href="resources/css/style.  css">
      <script src="https://kit.fontawesome.com/381ef55a42.js" crossorigin="anonymous"></script>
    
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Cuprum:wght@500&display=swap" rel="stylesheet">
    
     </head>
    
    <body>
    <header>
        <nav>
            <div>
            <ul>
                <li><a href="index.html"><i       ></i>Главная</a></li>
                <li><a href="index.html"><i  ></i>Межкомнатные двери</a>
                  <ul>
                    <li><a href="index.html">Первые</a></li>
                    <li><a href="index.html">Вторые</a></li>
                    <li><a href="index.html">Третьи</a></li>
                    <li><a href="index.  html">Четвертые</a></li>
                    <li><a href="index.html">Пятые</a></li>
                  </ul>
                </li>
                <li><a href="index.html"><i></i>Входные Двери</a>
                  <ul>
                    <li><a href="index.html">Шестые</a></li>
                    <li><a href="index.html">Седьмые</a></li>
                    <li><a href="index.html">Восьмые</a></li>
                    <li><a href="index.html">Девятые</a></li>
                    <li><a href="index.html">Десятые</a></li>
                  </ul>
                </li>
                <li><a href="index.html"><i  ></i>Фурнитура</a></li>
                <li><a href="index.html"><i></i>Услуги</a></li>
                <li><a href="index. html"><i></i>Плинтусы</a></li>
                <li><a href="index.html"><i></i>О компании</a></li>
                <li><a href="index.html"><i></i>Акции</a></li>
                <li><a href="index.html"><i></i>Контакты</a></li>
            </ul>
            </div>
        </nav>
    </header>
    </body>
    
    </html>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html — неупорядоченный список, вложенный в упорядоченный список

Задавать вопрос

спросил 2 года 9 месяцев назад

Изменено 2 года, 9 месяцев назад

Просмотрено 761 раз

Я вложил неупорядоченный список в упорядоченный список:

 

<голова>
  Каскадные списки

<тело>
  
  Список1
    Список1 элемент1
    Список1 элемент2
    
      
      Список2
        Список 2 элемент 1
        Список2 элемент2
        Список2 элемент3
      
    Список1 элемент3
    Список1 элемент4

Но в Google Crome, Windows Explorer и Firefox я получаю разные результаты счетчика записей списка.

С Google Crome и Windows Explorer работает нормально:

 List1
1.Список1 элемент1
2.Список1 элемент2
 Список2
◦Список2 элемент1
◦Список2 элемент2
◦Список2 элемент3
3.Список1 элемент3
4.Список1 элемент4

Но с Firefox это не работает и счетчик элементов не игнорирует элементы ненумерованного списка, и это выглядит так:

 List1
1.Список1 элемент1
2.Список1 элемент2
 Список2
◦Список2 элемент1
◦Список2 элемент2
◦Список2 элемент3
4.Список1 элемент3
5.Список1 элемент4

Кто-нибудь знает, как избежать этого эффекта?

html
вложенные списки

Ваш встроенный список должен находиться внутри элемента

, который его содержит. В настоящее время он вставлен между двумя элементами списка.

Итак, вместо:

 Список1 элемент2
  
  Список2
    Список 2 элемент 1
    Список2 элемент2
    Список2 элемент3

У вас должно быть:

 List1 item2 
  
  Список2
    Список 2 элемент 1
    Список2 элемент2
    Список2 элемент3

Вот скрипт, показывающий эту структуру, и он правильно работает в Chrome, Firefox и Edge: https://jsfiddle. net/dnyrs940/

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

html — Вложенный список не работает

спросил 8 лет, 4 месяца назад

Изменено 8 лет, 4 месяца назад

Просмотрено 3к раз

Это мой код. Проблема в том, что список не вложен должным образом. Я добавил padding-left, но число в левом поле не исчезло.

 #ли {
  padding-left: 20px !важно;
}

Мой продуктовый магазин

<ч>

Следующие товары доступны в моем магазине:

<ол>

Сахар

Шоколад :

Тоблерон

Нестле

Рис

Другие продукты питания...

HTML
CSS
HTML-Lists

Вам нужно добавить еще

, потому что список вложен внутри в списке. См. W3C Spec .

  Мой продуктовый магазин 
<ч>
Следующие товары доступны в моем магазине:
<ол>
  Сахар
  Шоколад :
    <ол>
      
Тоблерон
      Нестле

Рис

Другие продукты питания...

JPEG">

Также удалите и , так как пустые элементы не имеют закрывающих тегов.

Ответ 1 правильный.

Чтобы сделать вложенные списки, вы должны поместить список в список. Итак, вам не хватало ol внутри li . Что имеет смысл, не так ли?

Вот вам видео которое пишет вложенный список https://www.youtube.com/watch?v=VTKonB86J2s

Технический справочник http://www.w3.org/wiki/HTML_lists

 <ол>
  Сахар
  Шоколад :
     <ол>
       
Тоблерон
       Нестле
     
  
  Рис
  Другие продукты питания...

Поскольку вложенный список считается списком внутри списка, вы должны открыть другой

id

Кстати, тег id должен использоваться только один раз на HTML-странице. Для многократного использования лучше использовать класса .

Вложенный список html: Как сделать вложенный список? | htmlbook.ru

Вложенные списки | HTML | CodeBasics

Задание

Полезное

html — Смещение вложенного списка

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

html — неупорядоченный список, вложенный в упорядоченный список

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

html — Вложенный список не работает

Мой продуктовый магазин

Мой продуктовый магазин

Добавить комментарий Отменить ответ

Рубрики

Рубрики