CSS отзывчивая ошибка, добавляющая il к ul динамически - PullRequest
Новая
       12

CSS отзывчивая ошибка, добавляющая il к ul динамически

0 голосов
/ 27 февраля 2020

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

. Вы можете попробовать его сами: gilbertomarcano.github.io

Снимок экрана 1

Снимок экрана 2

Снимок экрана 3

Снимок экрана 4

Мне очень жаль, если я не проясняю себя, но я новичок в этом

Мой HTML li выглядит как 

<div class="cd-schedule cd-schedule--loading margin-top-lg margin-bottom-lg js-cd-schedule">
    <div class="cd-schedule__timeline">
      <ul>
        <li><span>07:00</span></li>
        <li><span>07:30</span></li>
        <li><span>08:00</span></li>
        <li><span>08:30</span></li>
        <li><span>09:00</span></li>
        <li><span>09:30</span></li>
        <li><span>10:00</span></li>
        <li><span>10:30</span></li>
        <li><span>11:00</span></li>
        <li><span>11:30</span></li>
        <li><span>12:00</span></li>
        <li><span>12:30</span></li>
        <li><span>13:00</span></li>
        <li><span>13:30</span></li>
        <li><span>14:00</span></li>
        <li><span>14:30</span></li>
        <li><span>15:00</span></li>
        <li><span>15:30</span></li>
        <li><span>16:00</span></li>
        <li><span>16:30</span></li>
        <li><span>17:00</span></li>
        <li><span>17:30</span></li>
        <li><span>18:00</span></li>
      </ul>
    </div> <!-- .cd-schedule__timeline -->

    <div class="cd-schedule__events">
      <!-- -->
      <ul>
        <li class="cd-schedule__group">
          <div class="cd-schedule__top-info"><span>Monday</span></div>

          <ul id='monday-ul'>
          </ul>
        </li>

        <li class="cd-schedule__group">
          <div class="cd-schedule__top-info"><span>Tuesday</span></div>

          <ul id='tuesday-ul'> 
          </ul>
        </li>

И я добавляю каждое событие, используя этот JS код 

createDayEvent(subject, day, weekdayid) {
    // Creating the li element
    const li = document.createElement('li')
    li.classList.add('cd-schedule__event')

    // Creating the em element 
    const em = document.createElement('em')
    em.classList.add('cd-schedule__name')
    em.textContent = subject.name
    em.value = subject.name

    // Creating the a element and its attributes
    const a = this.createElement('a')
    const dataStart = this.createAttribute('data-start', this.intToDate(day.hours[0]))
    const dataEnd = this.createAttribute('data-end', this.intToDate(day.hours[day.hours.length - 1] + 1))
    const dataContent = this.createAttribute('data-content', 'event-abs-workout')
    const dataEvent = this.createAttribute('data-event', 'event-1')
    const href = this.createAttribute('href', '#0')

    // Set attributes
    a.setAttributeNode(dataStart)
    a.setAttributeNode(dataEnd)
    a.setAttributeNode(dataContent)
    a.setAttributeNode(dataEvent)
    a.setAttributeNode(href)

    // Append everything to the correspond element
    a.appendChild(em)

    li.appendChild(a)

    // Getting the correct ul element and append the li
    const weekday = document.getElementById(weekdayid)

    weekday.appendChild(li)
}
...