За последние 24 часа нас посетили 20624 программиста и 1008 роботов. Сейчас ищут 363 программиста ...

Можно ли в списки вкладывать дивы?

Тема в разделе "HTML и CSS", создана пользователем MiraKR, 19 сен 2019.

  1. MiraKR

    MiraKR Новичок

    С нами с:
    9 июл 2018
    Сообщения:
    35
    Симпатии:
    2
    Здравствуйте! Пожалуйста, подскажите, в маркированные и нумерованные списки можно вкладывать дивы. Я хочу создать содержание статьи, обернутое в <ol></ol>. В каждом <li></li> название подзаголовка. Стили у списка убрала через list-style-type: none;, чтобы не прописывались стандартные цифры. Хотела задать в каждом <li></li> цифру перед названием подзаголовков, заключить ее в <div></div>, чтобы изменить цвет и величину цифры. Так можно делать?
     
  2. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    @MiraKR вот так можно
    HTML:
    1. <!doctype html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    6.  
    7.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
    8.  
    9.     <title>Hello, world!</title>
    10.   </head>
    11.   <body>
    12.     <ul class="nav nav-tabs">
    13.   <li class="nav-item">
    14.     <a class="nav-link active" href="#">Active</a>
    15.   </li>
    16.   <li class="nav-item dropdown">
    17.     <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    18.     <div class="dropdown-menu">
    19.       <a class="dropdown-item" href="#">Action</a>
    20.       <a class="dropdown-item" href="#">Another action</a>
    21.       <a class="dropdown-item" href="#">Something else here</a>
    22.       <div class="dropdown-divider"></div>
    23.       <a class="dropdown-item" href="#">Separated link</a>
    24.     </div>
    25.   </li>
    26.   <li class="nav-item">
    27.     <a class="nav-link" href="#">Link</a>
    28.   </li>
    29.   <li class="nav-item">
    30.     <a class="nav-link disabled" href="#">Disabled</a>
    31.   </li>
    32. </ul>
    33.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    34.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" ></script>
    35.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    36.   </body>
    37.   </html>
     
    MiraKR нравится это.
  3. MiraKR

    MiraKR Новичок

    С нами с:
    9 июл 2018
    Сообщения:
    35
    Симпатии:
    2
    Большое Вам спасибо!