Флажок «Материализовать CSS» внутри складного

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

<ul class = "collapsible">
 <li>
  <div class = "collapsible-header"><i class = "materialicons">filter_drama</i>First</div>
  <div class = "collapsible-body">
   <label>
    <input type = "checkbox" />
    <span>Red</span>
   </label>
  </div>
 </li>
 <li>
  <div class = "collapsible-header"><i class = "material-icons">place</i>Second</div>
  <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
 </li>
 <li>
  <div class = "collapsible-header"><i class = "material-icons">whatshot</i>Third</div>
  <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
 </li>
</ul>

html css checkbox materialize

22.07.2018 08:43

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

535

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот рабочая демонстрация

 $(document).ready(function(){
    $('.collapsible').collapsible();
  });

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
    
<!-- Compiled and minified CSS -->
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
            
          <ul class = "collapsible">
    <li>
      <div class = "collapsible-header"><i class = "material-icons">filter_drama</i>First</div>
      <div class = "collapsible-body">
        <label>
        <input type = "checkbox" />
        <span>Red</span>
      </label>
      </div>
    </li>
    <li>
      <div class = "collapsible-header"><i class = "material-icons">place</i>Second</div>
      <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class = "collapsible-header"><i class = "material-icons">whatshot</i>Third</div>
      <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

Спасибо, в моем HTML мне просто нужно импортировать <link rel = "stylesheet" href = "cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/‌ css /…">

— 24.07.2018 06:04

22.07.2018 08:49